自定义组件中定义使用v-model
<Component-A v-model="msg" />
在 vue2.x 中， 在自定义组件中
{
props: {
myValue: {
type: String,
default: ''
}
},
model: {
prop: 'myValue',
event: 'update:myValue' // 自定义派发的事件名字, emit('update:myValue', newValue)
}
}
在vue3.x 版本中
/*
在此组件内更新 modelValue 值的时候，
固定派发事件名称 update:modelValue
*/
{
props: {
modelValue: {
type: String, // 固定prop属性名字
default: ''
}
}
}
自定义组件内部同样使用v-model了上面的 modelValue 的值,(自定义组件内部)
<Component-B v-model="value" />
{
props: {
modelValue: {
type: String, // 固定prop属性名字
default: ''
}
},
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value);
}
}
}
}
自定义组件定义多个v-model
<Component-C
v-model:value="value"
v-model:title="title"
/>
{
props: { // 在它们需要更新数据时候 派发事件 emit('update: propName', newValue)
value: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
}
}
另一种效果类似v-model的
-
父组件中
<Component-B :value.sync="msg" />
ComponentB:
export default {
name: 'ComponentB',
props: {
value: {
type: String,
default: ''
}
}
// 当 value 属性的值要更新的时候
// this.$emit('update:msg': newValue) 即可
}
