起始v-model就是v-bind:value + 'input'事件的语法糖，使用v-model来进行双向数据绑定的时：
<input v-model="someValue">
// 等效于====>
<input v-bind:value="someValue" v-on:input="someValue=$event.target.value">
如果自定义组件的v-model要生效，就是这两点：
- 接受一个 value 属性
props: {
// 一定要一个value的prop
value: {
type: String,
required: false
},
},
- 在有新的value时触发input事件
this.$emit("input", changeInfo);
下面的例子我是基于element-ui的select，和后台接口有点查询的交互，在选择的时候，也是就是el-select发出@change事件的时候，把选中的内容发出去，这样就把自定义组件弄好了双向绑定了。
<template>
<el-select
style="width: 100%"
:multiple="multiple"
filterable
remote
reserve-keyword
:placeholder="$t('inputCbuOrName')"
:remote-method="onOutletSearch"
:clearable="true"
@change="handleDealerSearchChange"
v-model="value"
>
<template v-if="curDealerOptions">
<el-option
v-for="item in curDealerOptions"
:key="item.pkId"
:label="`${item.cbuNo} - ${item.shortNameCn}`"
:value="valueProp ? item[valueProp]:item"
></el-option>
</template>
</el-select>
</template>
<script>
import { searchOutlet } from "@/api/outlet";
export default {
props: {
// 一定要一个value的prop
value: {
type: String,
required: false
},
},
data() {
//这里存放数据
return {
// 和后台交互查询到的下拉框列表
curDealerOptions: []
};
},
//方法集合
methods: {
// 和后台交互
onOutletSearch(query) {
if (query != "") {
searchOutlet(query)
.then(response => {
this.curDealerOptions = response.data;
})
.catch(error => {
console.log("outletSearch failed", error);
});
}
},
// 值变化的时候发input事件，把选中的内容发出去
handleDealerSearchChange(changeInfo) {
console.log("handleDealerSearchChange", changeInfo);
this.$emit("input", changeInfo);
}
}
};
</script>
