VUE 用v-model的双向绑定原理封装弹窗组件

习惯了用父子组件传值，也尝试下v-model吧~

第一种：使用v-model

官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为close，否则默认为input.

// 父组件  
        
import manageDialog from './manageDialog'export default {  name: 'Manage',  components: {    manageDialog  },data(){return {manageDialog: false, }}}// 子组件  
          
 
task_key
 
622cdfe0-af40-31fd-a5ae-9b7ecb796b61
      
      
export default {  name: 'ManageDialog',  props: {    manageDialog: {      type: Boolean,      default: false    }  },  model: {    prop: 'manageDialog',    event: 'close'  },  data() {    return {      title: '详情'    }  },  methods: {    handleClose() {      this.$emit('close', false)    }  }}

第二种：使用.sync修饰符

子组件通过this.$emit("update:show",false);  可以直接将父组件传过来的show值改变，从而达到显示隐藏的目的。

// 父组件  
      
import manageDialog from './manageDialog'export default {  name: 'Manage',  components: {    manageDialog  },}// 子组件  
          
 
task_key
 
622cdfe0-af40-31fd-a5ae-9b7ecb796b61
      
      
export default {  name: 'ManageDialog',  props: {    manageDialog: {      type: Boolean,      default: false    }  },  data() {    return {      title: '详情'    }  },  methods: {    handleClose() {      this.$emit('update:manageDialog', false)    }  }}