vue2父子组件双向绑定

一、v-model指令

当在Vue 2中实现父子组件的双向数据绑定时，主要涉及以下几个步骤：

1. 在父组件中定义要传递给子组件的数据，并使用v-model指令将数据传递给子组件。

2. 在子组件中声明一个props接收来自父组件的数据，并在子组件内部使用该数据。

3. 在子组件中，通过监听子组件内部数据的变化，并使用$emit方法向父组件发送一个自定义事件。

4. 在父组件中通过v-on或@监听子组件发出的自定义事件，并在相应事件处理程序中更新父组件中的数据。

ChildComponent.vue - 子组件 

<template>
  <div>
    <h3>Child Component</h3>
    <!-- 直接使用props中的value来进行数据双向绑定 -->
    <input v-model="childMessage" />
  </div>
</template>

<script>
export default {
  // 声明props来接收来自父组件的value数据
  props: ['value'],
  data() {
    return {
      childMessage: this.value, // 使用value数据来初始化子组件内部的childMessage
    };
  },
  watch: {
    childMessage(newValue) {
      // 监听子组件内部数据的变化，并通过$emit方法向父组件发送一个名为'input'的自定义事件
      // 并传递当前子组件内部的childMessage数据作为参数
      this.$emit('input', newValue);
    },
  },
};
</script>

</script>

ParentComponent.vue - 父组件

<template>
  <div>
    <h2>Parent Component</h2>
    <!-- 使用v-model将messageFromChild数据传递给ChildComponent -->
    <ChildComponent v-model="messageFromChild" />
    <p>Message from Child: {{ messageFromChild }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      messageFromChild: '', // 定义要传递给子组件的数据
    };
  },
};
</script>

父组件中使用v-model指令将messageFromChild数据传递给子组件，而子组件通过props接收父组件传递的value，并通过v-model指令将其与子组件内部的childMessage数据建立双向绑定。当子组件中的输入发生变化时，watch会监听到变化并自动触发$emit('input', newValue)来更新父组件中的messageFromChild数据。

二、使用sync修饰符

Vue 2提供了sync修饰符，它可以简化父子组件之间的双向绑定。使用sync修饰符时，父组件可以通过一个修饰符来传递一个带有.sync后缀的属性给子组件，然后子组件可以直接通过更新该属性来实现双向绑定。

ChildComponent.vue - 子组件

<template>
  <div>
    <h3>Child Component</h3>
    <!-- 直接使用props中的value来进行数据双向绑定 -->
    <input v-model="childMessage" />
  </div>
</template>

<script>
export default {
  // 声明props来接收来自父组件的value数据
  props: ['childMessage'],
  methods: {
    // 使用.sync简写直接更新父组件的属性
    updateParentMessage(newValue) {
      this.$emit('update:childMessage', newValue);
    },
  },
};
</script>

ParentComponent.vue - 父组件

<template>
  <div>
    <h2>Parent Component</h2>
    <!-- 使用.sync简写将messageFromChild数据传递给ChildComponent -->
    <ChildComponent :childMessage.sync="messageFromChild" />
    <p>Message from Child: {{ messageFromChild }}</p>
  </div>
</template>

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

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

父组件中使用:childMessage.sync来传递messageFromChild给子组件，并在子组件中直接使用props中的childMessage来建立双向绑定。子组件中使用updateParentMessage方法来触发一个名为'update:childMessage'的自定义事件，并将新的childMessage值作为参数传递给父组件，从而更新父组件中的数据。