VUE自定义组件双向绑定

以二次确认的弹框组件为例，子组件不能直接修改prop过来的数据。

子组件Child.vue：

<template>
  <div>
	<el-dialog :visible.sync="visible">
	  // 内容
	</el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Child",
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
      }
    },
    watch: {
      value(val) {
        this.visible = val;
      },
      visible(val) {
        this.$emit("input", val);
      }
    },
    methods: {}
  }
</script>

父组件Parent.vue:

<template>
	<div>
		<child v-model="confirmVisible"></child>
	</div>
</template>

原理：

<input v-model="someThing">

是下面这段代码的语法糖

<input :value="someThing" @input="someThing=$event.target.value">

使用 v-model 的时候需要注意两点：

• 子组件要接收 value 属性。
• value改变时要触发 input 事件。