v-model的使用——是双向的,是语法糖-简化写法 & $event 是事件处理函数的参数 & v-model 默认是隐藏的-参数是false
v-bind是单向传递数据的,v-mode是双向的,是语法糖-简化写法
v-model 等价于
v-bind:value="searchText"
v-on:input="searchText = $event"
自定义事件也可以用于创建支持 v-model
的自定义输入组件。记住:
<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
attribute 绑定到一个名叫value
的 prop 上 - 在其
input
事件被触发时,将新的值通过自定义的input
事件抛出
写成代码之后是这样的:
$event 是事件处理函数的参数
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在 v-model
就应该可以在这个组件上完美地工作起来了:
<custom-input v-model="searchText"></custom-input>
data () {
return {
// 导入组件的名字,是字符串形式
componentId: 'Login',
//v-model 默认是隐藏的
searchText: false
}
},
到目前为止,关于组件自定义事件你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把自定义事件读完。