一提到v-model就会想到数据的双向绑定,但其实现原理又是什么呢?
在原生表单中:
<input type="text" v-model="name">
相当于:(先给input绑定value属性值为数据name,然后给input绑定input事件将其input的value值赋给数据name
<input type="text" :value="name" @input="name = $event.target.value">
在自定义组件中:
要在字符串模板中使用上述的第二种方式来实现v-model。
<div id="demo">
<test v-model="name"></test>
<input type="text" v-model="name" >
<p>{{name}}</p>
<button @click="ccc">按钮</button>
</div>
Vue.component("test",{
//props 当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性
//v-model 绑定的就是 input等表单元素的value、
//因此此组件中的prop必为value
props:['value'],
template:`
<input
v-on:input="$emit('input', $event.target.value)"
v-bind:value="value"
>`
})
new Vue({
el:"#demo",
data:{
name:"你好",
},
methods:{
ccc:function(){
this.name = "世界";
}
}
})