Vue中实现父子组件的数据的双向绑定（vue.sync的用法）

项目场景：

前两天日常开发时，遇到需要父子组件双向绑定的问题，出现了一些BUG，但是考虑到组件的可维护性，vue中是不允许子组件改变父组件传的props值的

---

问题描述：

问题场景就是子组件传递数据给父组件，父组件收到并改变返回给子组件，子组件再次改变值发送给父组件，大概就是实现双向绑定，其中有一点点细节不一样

1.子组件

//子组件---一个dialog弹窗
<el-dialog
  :visible="visible"
  title="选择图片">
  <p class="tips">提示：以下内容来自于公众号素材管理中的图片，如需上传图片，请到公众号素材上传</p>
  <span class="dialog-content">
      <div class="pic-desc">
          <img src="" alt="">
          <span>图片名称</span>
          <a href="">选择</a>
      </div>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" @click="operateSure">确 定</el-button>
    <el-button size="small" @click="operateCancle">取 消</el-button>
  </span>
</el-dialog>
</template>
<script>
export default {
  name: 'pic-dialog',
  data () {
    return {
      visible: false
    }
  },
  props: {
    editPicDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    editPicDialogVisible (val) {
      this.visible = val
      //this.editPicDialogVisible = !editPicDialogVisible  此写法报错，因为不允许修改props的值
    }
  }
}
</script>

2.父组件中使用

//子组件在父组件中的使用
 	<pic-dialog :editPicDialogVisible='editPicDialogVisible'></pic-dialog>
 //绑定button实现子组件的显示和隐藏的方法	
 	addPicDialog () {
 	 this.editPicDialogVisible = true
 	 console.log('setTrue ' + this.editPicDialogVisible)
},

---

原因分析：

这里出现的bug就是，点击button(调用addPicDialog方法)，出现弹窗，关闭后再次点击均为无效

通过测试发现：父组件传给子组件的editPicDialogVisible在第一次点击后一直为true，子组件的数据再未发生改变，导致无法控制子组件的显示与隐藏

那这里就需要子组件改变editPicDialogVisible的值之后再传给父组件，完成双向绑定，但是又不能直接修改props的值，所以需要使用vue.sync方法解决这个问题

---

解决方案：

1.子组件

//子组件---一个dialog弹窗
<el-dialog
  :visible="visible"
  title="选择图片">
  <p class="tips">提示：以下内容来自于公众号素材管理中的图片，如需上传图片，请到公众号素材上传</p>
  <span class="dialog-content">
      <div class="pic-desc">
          <img src="" alt="">
          <span>图片名称</span>
          <a href="">选择</a>
      </div>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" @click="operateSure">确 定</el-button>
    <el-button size="small" @click="operateCancle">取 消</el-button>
  </span>
</el-dialog>
</template>
<script>
export default {
  name: 'pic-dialog',
  data () {
    return {
      visible: false
    }
  },
  props: {
    editPicDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    editPicDialogVisible (val) {
      this.visible = val
    }
  },
  methods: {
    operateCancle () {
      // 关闭窗口
      this.$emit('update:editPicDialogVisible', false)
    },
    operateSure () {
      // 关闭窗口
      this.$emit('update:editPicDialogVisible', false)
      // 保存数据
    }
  }
}
</script>

2.父组件中使用

//子组件在父组件中的使用
 	<pic-dialog :editPicDialogVisible.sync='editPicDialogVisible'></pic-dialog>、
 //绑定button实现子组件的显示和隐藏的方法	
 	addPicDialog () {
 	 this.editPicDialogVisible = true
 	 console.log('setTrue ' + this.editPicDialogVisible)
},

欧克克，这样问题就解决啦，实现的父子组件的双向绑定，控制显示与隐藏的布尔值就是动态的，就可以多次点击button出现弹窗啦！就酱 啾咪~