Vue 自定义组件v-model父子组件传值双向绑定
Vue 自定义组件v-model父子组件传值双向绑定
之前自己写过一个自定义组件,父组件使用 v-model 进行双向数据绑定的,写了好几次,当时明白,但是过了几天又忘了,写一下吧。
日常我们使用v-model
<div id="app">
<p>{{message}}</p>
<input type="text" v-model='message'>
</div>
<script>
var vueApp = new Vue({
el:'#app',
data:{
message:"我其实是一个语法糖"
}
})
</script>
去除它的语法糖
<div id="app">
<p>{{message}}</p>
<input type="text" v-bind:value='message' @input='message = $event.target.value'>
</div>
<script>
var vueApp = new Vue({
el: '#app',
data: {
message: "我其实是一个语法糖"
}
})
</script>
自定义组件如何使用v-model
vue里面自定义组件v-model的语法糖:
<custom v-model='something'></custom>
约等于
<custom :value="something" @input="value => { something = value }"></custom>
用 v-model 语法糖来向父组件传递值。
父组件使用v-model与子组件表单实现—双向绑定。
在子组件里面,首先在props里面接收一下value值,然后初始化到newValue里面,然后监听newValue值变化,变化后发射事件到父组件
watch:{
newValue(){
this.$emit('input', this.newValue)
}
}
还有一篇:https://blog.csdn.net/weixin_42776111/article/details/108979101
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014