vue2子组件与父组件双向绑定

Vue.js 是一个构建用户界面的渐进式框架，它允许开发者使用双向数据绑定来同步父子组件之间的数据。在 Vue 2 中，双向数据绑定主要是通过 `v-model` 指令实现的。`v-model` 实际上是语法糖，它在表单元素上创建了一个双向的绑定，内部使用了 `value` 属性和 `input` 事件。当子组件需要与父组件进行双向绑定时，通常会通过 `props` 向下传递数据，然后通过自定义事件（通常是使用 `$emit` 方法）将数据变化通知给父组件。

下面是子组件与父组件双向绑定的基本步骤：

1. 子组件定义 `props` 接收来自父组件的数据。
2. 子组件定义一个自定义事件（例如 `update:myProp`），当子组件的数据需要更新父组件数据时触发。
3. 子组件提供一个方法，当数据变化时（如输入框的值变化），调用这个方法触发自定义事件，并将新的数据作为参数传递给父组件。
4. 父组件监听这个自定义事件，并在事件处理函数中更新父组件中对应的 `props` 数据。

示例代码如下：

**子组件**

<template>
  <div>
    <input type="text" :value="innerValue" @input="updateParentValue" />
  </div>
</template>

<script>
export default {
  props: {
    innerValue: String
  },
  methods: {
    updateParentValue(event) {
      this.$emit('update:innerValue', event.target.value);
    }
  }
};
</script>

**父组件**

<template>
  <div>
    <my-child v-model="parentValue" />
  </div>
</template>

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

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

在这个例子中，父组件通过 `v-model` 绑定到一个 `data` 属性 `parentValue` 上，而子组件通过 `props` 接收这个值，并将其绑定到一个输入框上。当输入框内容改变时，子组件会触发 `update:innerValue` 事件，父组件监听这个事件并更新 `parentValue`。