美文网首页
vue组件内数据与组件外的数据的双向绑定

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

作者: saintkl | 来源:发表于2018-04-03 11:00 被阅读0次

    在项目开发中遇到子组件向父组件传递数据报错的问题
    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;//
       },
    }
    

    相关文章

      网友评论

          本文标题:vue组件内数据与组件外的数据的双向绑定

          本文链接:https://www.haomeiwen.com/subject/frjqhftx.html