https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model
我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。
如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。
v-model的绑定原理：
v-model的语法糖：
<input
:value="something"
@input="something=$event.target.value"
/>
所以在组件上使用时，则简化成
<custom-input
:value="something"
@input="something=$event"
>
</custom-input>
为了使带有v-model的组件正常工作，所以：
1.将带有v-model的组件通过v-model绑定实例中date的值，然后在此组件中使用prop接受传过来的值
props:{value:Number},
2.子组件利用$emit触发input事件，并传入新值给父组件。
this.$emit('input',this.val)
<body>
<div id="app">
<my-component v-model='msg'></my-component>
msg:{{msg}}
<my-counter v-model="num"></my-counter>
num:{{num}}
</div>
</body>
<script>
Vue.component('my-component',{
template:`<div>
<input type="text" :value="currentValue" @input="handleInput">
</div>
`,
props:['value'],//接受父组件传递过来的value值
data:function(){
return {
currentValue:this.value//将prop属性绑定到data属性上，以便修改prop属性（vue是不允许直接修改prop属性的值的）
}
},
methods:{
handleInput(event){
var value =event.target.value;
this.$emit('input',value);//触发input事件，并传入新的值
}
}
})
Vue.component('my-counter',{
template:`
<div>
<h1>{{value}}</h1>
<button @click="plus">++</button>
<button @click="minu">--</button>
</div>
`,
props:{
value:Number
},
data:function(){
return {
val:this.value
}
},
methods:{
plus(){
this.val=this.val+1;
this.$emit('input',this.val)
},
minu(){
this.val=this.val-1;
this.$emit('input',this.val)
},
}
})
new Vue({
el:'#app',
data:{
msg:'hello world',
num:0
}
})
</script>
---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80624644
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
