背景
项目中需要编写一个全局组件,继承element select,二次封装element select,不用重复去写封装组件数据的代码。这里面遇到了父子组件传递值不成功的问题,通过computed计算属性解决。
知识点
v-bind=“$props”:
可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props和size。
v-model
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
text 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
v-model和v-bind的区别
v-model提供了双向数据绑定,v-bind只以一种方式绑定数据。
子组件向父组件共享数据
Computed的getter和setter方法
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
二次封装的el-select组件代码
<template>
<el-select placeholder="请选择供应商" clearable v-model="supplier">
<el-option
v-for="supplier in wmsSupplierList"
:key="supplier.id"
:label="supplier.supplierName"
:value="supplier.id"
></el-option>
</el-select>
</template>
<script>
import { listWmsSupplier} from '@/api/wms/supplier'
export default {
props: ['value','size'],
data() {
return {
wmsSupplierList: [],
}
},
computed: {
supplier: {
get() {
return this.value;
},
set(v) {
this.$emit('input', v);
}
}
},
created() {
this.getSupplierList();
},
methods: {
getSupplierList(){
listWmsSupplier({},{page:0,size:1000}).then(response => {
const { content } = response
this.wmsSupplierList = content;
});
},
}
}
</script>
在main.js中注册全局组件
import WmsSupplierSelect from '@/components/WmsSupplierSelect'
Vue.component('WmsSupplierSelect',WmsSupplierSelect)
//调用的地方使用即可
<WmsSupplierSelect v-model="queryParams.supplierId" size="small"/>