v-model 和 .sync结合使用的最佳实践

在做后台管理开发过程中，使用element-ui遇到的一些小tips：

1. 当你封装一个dialog组件的时候，组件内部使用了el-dialog组件，那么这个组件控制显示隐藏的开关一般都是使用.sync，但你这个组件的显示与隐藏实际是通过父组件来控制的，所以你需要使用父组件传进来一个布尔值，这时会出现一个问题，当你直接把父组件传过来的布尔值传给这个dialog组件的.sync的时候，因为.sync是双向绑定的，所以关闭弹框后el-dialog在内部会把这个布尔值该为false，这时候就出现了vue不提倡的情况（会发出警告），在子组件内部修改了父组件传过来的指，所以这里可以使用计算属性来解决这个问题：

computed:{  
  _dialogVisible:{ // {{1}}
    get(){
      return this.dialogVisible
    },
    set(){
      this.$emit('update:dialogVisible');
    }
  },
},

此处通过_dialogVisible来控制组件内部的弹框的显示隐藏，当弹框关闭的时候，使用'update:dialogVisible'方法去修改父组件的值，当然了，父组件也要通过.sync把这个布尔值给子组件，这样就避免了直接在子组件修改props的问题。此处还可以使用 在组件上直接定义v-model的解决方案
2.修改某个table栏的一项数据的时候：

这个时候会弹出一个dialog，里面是一个el-form，这个时候实际你是需要把这行的数据通过v-model传递给dialog内部的表单的，如果直接传递就会遇到问题1中提到的问题 ，甚至会出现你在表单里只要修改字段的值，table中的那条数据也跟着变了的问题，即使你不保存，所以此处还是要使用一个计算属性，用1中的方法把父组件传过来的数据和当前表单使用的数据隔离开，而且务必记得，父组件将 row数据传递过来之前要做深拷贝处理，否则v-model将会失效