首页 > 【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定

【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定

子组件sg-component.vue代码 

父组件（引用子组件）代码

渲染效果

注意！在子组件内部不要用v-model绑定modelValue变量，否则会报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modelValue" 

具体原因参考官方文档：https://cn.vuejs.org/v2/guide/components-props.html#单向数据流https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

那么如何解决这一“双重双向绑定”报错问题呢？

我们可以在子组件内部引入一个中间变量（子组件内部作用域有效），用$emit()方法来触发来同步更新子组件内部的中间变量变化值，这样就可以有效避开“双重双向绑定”报错问题了。

修改后的组件sg-component.vue代码 

这样就不会报错了~！

扩展阅读【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能_你挚爱的强哥❤给你发来1条消息❤-CSDN博客https://s-z-q.blog.csdn.net/article/details/120600781

更多相关：