参考网址:
https://vue.docschina.org/v2/guide/components.html
在组件中使用 v-model
自定义事件(custom event),还可以用来创建出「实现 v-model 机制的自定义输入框(custom input)」
。回顾前面章节中:
<input v-model="searchText">
等同于如下:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value" >
而用于一个组件时,v-model 则可以替换为如下:
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了组件内部能够有效运行,组件内的 必须:
将 value 属性绑定到 value prop
在 input 输入框中,在自定义的 input 事件中,发送一个新的值
这里就是上面所描述的:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在,我们的 custom-input 组件,应该可以实现 v-model 的完美运行: