前言：日常开发中，除了直接在input标签上使用v-model指令外，封装的组件也需要v-model，接下来看看如何在Vue组件中使用自定义v-model
- home.vue
<template>
<div class="home-box">
<category v-model="categoryValue" @customChange="onChange"/>
</div>
</template>
import category from "./category.vue"
- 组件
<a-select style="width: 120px" @change="handleChange" :value="params"> // 这里使用value或者v-model都可以
<a-select-option v-for="item in list" :value="item.val" :key="item.val">
{{ item.label }}</a-select-option
>
</a-select>
export default {
model: {
// 要和prop里接收的参数对应
prop: "params",
// 随便命名事件，对应下面$emit即可
event: "customChange",
},
prop: {
params: {
type: String,
default: "",
},
},
}
handleChange(value) {
this.$emit('customChange',value)
}
这里的model是组件里的关键属性，model里定义的prop属性值，要和prop里接收的参数值相对应，然后在进行事件操作时，将event里事件$emit即可。这样就可以使用自定义的v-model了
完整代码
<template>
<div class="home-box">
<category v-model="categoryValue" @customChange="onChange"/>
</div>
</template>
<script>
import category from "./category.vue"
export default {
data() {
return {
categoryValue:''
};
},
components:{
category
},
methods: {
onChange(value) {
console.log(value, 'value')
}
},
};
</script>
// 子组件
<template>
<div>
<a-select style="width: 120px" @change="handleChange" :value="params">
<a-select-option v-for="item in list" :value="item.val" :key="item.val">
{{ item.label }}</a-select-option
>
</a-select>
</div>
</template>
<script>
export default {
model: {
prop: "params",
event: "customChange",
},
prop: {
params: {
type: String,
default: "",
},
},
data() {
return {
list: [
{
label: "类目1",
val: "1",
},
{
label: "类目2",
val: "2",
},
],
};
},
methods: {
handleChange(value) {
this.$emit('customChange',value)
}
}
};
</script>
