vue组件内数据与组件外的数据的双向绑定

在项目开发中遇到子组件向父组件传递数据报错的问题
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
经搜索参考发现“组件内部自己变了告诉外部,外部决定要不要变”果然好用,遂纪录下来。
参考网页 vue组件内数据与组件外的数据的双向绑定

//子组件中添加watch监视自己是否改变并告诉外部;
 export default{
   props:['dialogFormVisible'],
   watch: {
          dialogFormVisible(val) {//父组通过props件传来的属性
            this.myFormVisible = val;
          },
          myFormVisible(val){//自己的属性*子组件要使用该属性,而不是父组件传来的属性
              this.$emit('addsubmit',val)//如果改变,通过addsubmit通知父组件
          }
        },
}
//父组通过监听addsubmit接收信息,通过changeFormvisible方法改变属性dialogFormVisible值;
 <Add :dialogFormVisible="dialogFormVisible" v-on:addsubmit="changeFormvisible" ></Add>
  export default{
    changeFormvisible(val){
       this.dialogFormVisible=val;//
   },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容