关于vue的v-model的自己理解(用于自己复习)
关于vue的v-model的自己理解1.在一般使用情况下,v-model为:<input v-model="searchText">等价于<input v-bind:value="searchText" v-on:input="searchTe
·
关于vue的v-model的自己理解
1.在一般使用情况下,v-model为:
<input v-model="searchText">
等价于
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
2.在组件中,v-model为:
<custom-input v-model="searchText"></custom-input>
等价于
<custom-input v-bind:value="searchText" v-on:input="searchText = arguments[0]"></custom-input>
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:click="$emit('change', $event.target.checked)"
>
`
})
添加model后相当于把value和input替换掉了
<base-checkbox v-bind:checked="checked" v-on:change="checked=arguments[0]"></base-checkbox>
更多推荐
已为社区贡献1条内容
所有评论(0)