VUE父子组件通信双向绑定

第一种：.sync修饰符

如果你想要更简单的方式来实现父组件向子组件传递参数并进行双向绑定，可以使用Vue 2中的.sync修饰符。
在父组件中，你可以使用.sync修饰符来传递参数给子组件，并实现双向绑定。在子组件中，你可以通过$emit方法触发一个自定义事件，并传递更新后的值给父组件。
下面是一个使用.sync修饰符的示例：

//父组件
<template>
  <div>
    <p>父组件的数据: {{ parentData }}</p>
    <ChildComponent :childData.sync="parentData"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: ''
    };
  }
};
</script>

//子组件
<template>
  <div>
    <input type="text" v-model="childData">
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  props: ['childData'],
  methods: {
    updateParentData() {
      this.$emit('update:childData', this.childData);
    }
  }
};
</script>

在父组件中，我们使用:childData.sync来传递参数给子组件，并实现双向绑定。在子组件中，我们使用$emit方法触发一个名为update:childData的自定义事件，并将子组件的childData作为参数传递给父组件。
这样，父组件和子组件之间就实现了双向绑定，父组件的数据变化会同步到子组件，子组件的数据变化也会同步到父组件。使用.sync修饰符可以简化代码，减少了手动监听和触发事件的步骤。

第二种:

你可以在子组件中使用model选项来实现父组件向子组件传递参数并进行双向绑定。
在子组件中，你可以通过model选项来定义父组件传递的prop属性名和触发事件的名称。这样，父组件就可以使用v-model指令来进行双向绑定。
下面是一个示例：

// 父组件
<template>
  <div>
    <p>父组件的数据: {{ parentData }}</p>
    <ChildComponent v-model="parentData"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: ''
    };
  }
};
</script>

//子组件
<template>
  <div>
    <input type="text" v-model="dialogForm">
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'dialogForm',
    event: 'change'
  },
  props: ['dialogForm'],
  methods: {
    updateParentData() {
      this.$emit('change', this.dialogForm);
    }
  }
};
</script>

在子组件中，我们使用model选项来定义父组件传递的prop属性名为dialogForm，触发事件的名称为change。在父组件中，我们使用v-model指令将父组件的parentData属性双向绑定到子组件的dialogForm属性上。
当子组件的数据发生变化时，通过$emit方法触发一个名为change的自定义事件，并将子组件的dialogForm作为参数传递给父组件。
这样，父组件和子组件之间就实现了双向绑定，父组件的数据变化会同步到子组件，子组件的数据变化也会同步到父组件。使用model选项可以简化代码，减少了手动监听和触发事件的步骤。

第三种：

// 子组件
<template>
  <div>
    <input type="text" :value="dialogForm" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['dialogForm']
};
</script>

// 父组件
// 在父组件中，你可以继续使用v-model指令将父组件的parentData属性与子组件的dialogForm属性进行双向绑定：
<template>
  <div>
    <p>父组件的数据: {{ parentData }}</p>
    <ChildComponent v-model="parentData"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: ''
    };
  }
};
</script>