一、Vue组件的使用之props
为了提高组件的复用性,在封装vue组件时需要遵守如下原则:
① 组件的DOM结构、Style样式要尽量复用
② 组件中要显示的数据,尽量由组件的使用者提供
为了方便使用者为组件提供要展示的数据,vue组件提供了props的概念
什么是组件的props
Props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件的内部,供子组件内部进行使用。
Props的作用:父组件通过props向子组件传递要展示的数据
Props的好处:提高了组件的复用性
2.在组件中声明props
在封装vue组件时,可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。
3.无法使用未声明的props
如果父组件给子组件传递了未声明的props属性,则这些属性会被忽略,无法被子组件使用。
4.动态绑定props的值
可以使用v-bind属性绑定的形式,为组件动态绑定Props的值
5.Props的大小写命名
组件中如果使用“camelCase(驼峰命名法)”声明了props属性的名称,则有两种方式为其绑定属性值。
注意:prop 的定义应该尽量详细,至少需要指定其类型
细致的 prop 定义有两个好处:
它们写明了组件的 API,所以很容易看懂组件的用法;
在开发环境下,如果向一个组件提供格式不正确的 prop,Vue 将会告警,以帮助你捕获潜在的错误来源。
二、实例: 封装开户银行选择组件,在不同的页面引用
点击选择银行,弹出银行选择对话框
定义组件:
<!-- 选择银行通用 -->
<template>
<div class="collection-content">
<!-- <el-tag-->
<!-- color="#ffffff"-->
<!-- style="font-size: 18px; padding: 0px 20px 10px 0px; border-color: #ffffff"-->
<!-- >银行信息-->
<!-- </el-tag>-->
<!-- 选择银行弹窗 -->
<el-dialog
title="选择银行"
:visible.sync="selectBankOpen"
width="60%"
append-to-body
>
<el-row type="flex" :gutter="24">
<el-col :span="24">
<el-form
:model="queryBankInfoParams"
ref="queryBankInfoForm"
size="small"
:inline="true"
v-show="showBankSearch"
label-width="108px"
>
<el-form-item label="编码(银行行号)" prop="bankCode">
<el-input
v-model="queryBankInfoParams.bankCode"
placeholder="请输入编码(银行行号)"
clearable
@keyup.enter.native="handleBankInfoQuery"
/>
</el-form-item>
<el-form-item label="银行名称" prop="bankName">
<el-input
v-model="queryBankInfoParams.bankName"
placeholder="请输入银行名称"
clearable
@keyup.enter.native="handleBankInfoQuery"
/>
</el-form-item>
<el-form-item label="所属市县" prop="citiesCounties">
<el-input
v-model="queryBankInfoParams.citiesCounties"
placeholder="请输入市县"
clearable
@keyup.enter.native="handleBankInfoQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleBankInfoQuery"
>搜索
</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetBankInfoQuery"
>重置
</el-button
>
</el-form-item>
</el-form>
<el-table
ref="singleTable"
:data="bankConfigList"
highlight-current-row
border
height="500"
@current-change="handleBankCurrentChange"
>
<el-table-column
label="编码(银行行号)"
align="center"
prop="bankCode"
/>
<el-table-column
label="名称(银行行名)"
align="center"
prop="bankName"
/>
<el-table-column label="省份" align="center" prop="province"/>
<el-table-column
label="市县"
align="center"
prop="citiesCounties"
/>
</el-table>
<pagination
:total="bankTotal"
:page.sync="queryBankInfoParams.pageNum"
:limit.sync="queryBankInfoParams.pageSize"
@pagination="getBankInfoList"
/>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectBankInfoComplete"
>确 定
</el-button
>
<el-button @click="selectBankOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listBankConfig} from "@/api/system/bankConfig";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Bankchose",
dicts: [],
components: {},
data() {
return {
// 收款信息明细分页
collectionCurrentPage: 1, // 当前页码
collectionPageSize: 10, // 每页显示数量
//显示银行信息dialog开始
selectBankOpen: false,
showBankSearch: true,
bankInfoLoading: true,
// 银行信息表格数据
bankConfigList: [],
// 查询参数
queryBankInfoParams: {
pageNum: 1,
pageSize: 10,
bankName: undefined,
province: undefined,
citiesCounties: undefined,
},
// 总条数
bankTotal: 0,
//选中的值
bankCurrentRow: null,
};
},
created() {
},
//金额过滤器
filters: {},
computed: {},
props: {},
methods: {
/** 选择银行 start */
//选择银行
showSelectBankDialog(obj) {
console.log("------- 进入子组件[选择银行] start... ")
this.bankCurrentRow = null;
this.queryBankInfoParams.bankName = "";
this.queryBankInfoParams.citiesCounties = "";
this.selectBankOpen = true;
this.handleBankInfoQuery();
},
/** 查询银行信息列表 */
getBankInfoList() {
this.bankInfoLoading = true;
// 后台查询
listBankConfig(this.queryBankInfoParams).then((response) => {
this.bankConfigList = response.rows;
this.bankTotal = response.total;
this.bankInfoLoading = false;
});
},
/** 搜索按钮操作 */
handleBankInfoQuery() {
this.queryBankInfoParams.pageNum = 1;
this.getBankInfoList();
},
/** 重置按钮操作 */
resetBankInfoQuery() {
this.resetForm("queryBankInfoForm");
this.handleBankInfoQuery();
},
/** dialog确定按钮操作 */
handleSelectBankInfoComplete() {
if (!this.bankCurrentRow) {
// 提示
this.$message({
message: "请选择银行",
type: "error",
});
return ;
}
this.selectBankOpen = false;
this.$emit('completeChose', this.bankCurrentRow);
},
/** 选择列操作 */
handleBankCurrentChange(val) {
this.bankCurrentRow = val;
},
/** 选择银行 edn*/
},
};
</script>
<style lang="scss" scoped>
.collection-content {
padding: 0 10px;
}
::v-deep .el-form-item--small .el-form-item__content {
width: 300px;
}
.text-overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
父组件中调用 :
1.
2.
三、vue 跨组件传参3种方式
- this.$emit(),子组件向父组件传参
首先在子组件加上点击事件触发才能传参,
// 子组件
<template>
<div class="title">
<button @click="btn()">提交</button>
</div>
</template>
<script>
export default {
methods: {
btn () {
// 注意这里是事件名,不是事件方法名
this.$emit('**recieveMsg**', 123)
}
}
}
</script>
// 父组件
<template>
<div>
// 子组件
<Title @recieveMsg='get' />
子组件传参{{title}}
</div>
</template>
<script>
export default {
data () {
return {
title: ''
}
},
methods: {
get (val) {
this.title = val
}
}
}
</script>
————————————————
- 通过父组件给子组件传递函数类型的props实现:子给父传递数据
父组件:
<SchoolCm :getSchoolName="getSchoolName"></SchoolCm>
methods: {
getSchoolName(name) {
console.log('App收到了学校名:', name)
}
}
子组件:
<button @click="sendSchoolName">把学校名给App</button>
props: ['getSchoolName'],
methods: {
sendSchoolName() {
this.getSchoolName(this.name)
}
}