昨天看Vue的官方文档,怎么都找不到之前在组件上使用v-model,然后组件同步取到值的方法。
后来找回Vue 2的文档,再结合Vue 3的文档,终于发现,Vue 3移除了$listeners
。
以前Vue 2是通过$listeners
,传递两个pros值,label和value,子组件通过v-on绑定一个方法(通过计算属性),结合$listeners
,再返回去。同时监听组件事件,把组件的值 ,通过$emits
返回给父组件。
父组件
<custom-input v-model="searchText"></custom-input>
Vue 2 子组件
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器,
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
>
</label>
`
})
Vue 3移除了listeners
,原因是现在事件监听器是 $attrs 的一部分。
如何监听子组件的值呢?
- 非兼容:用于自定义组件时,v-model prop 和事件默认名称已更改:
prop:value -> modelValue;
event:input -> update:modelValue;- 非兼容:v-bind 的 .sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替;
由此可知,prop的 value 值已经改成modalValue
,input 事件已改为update:modalValue
。
Vue 3子组件
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})