vue2中v-model父子组件通信

在Vue2中，可以使用v-model在父子组件之间进行双向绑定和通信。下面是一个示例：

父组件：

<template>
  <div>
    <ChildComponent v-model="message" />
    <p>Message from child: {{ message }}</p>
  </div>
</template>

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

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

子组件（ChildComponent.vue）：

<template>
  <div>
    <input type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    // 通过计算属性将父组件传递的value值绑定到子组件的内部变量中
    localValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue); // 触发父组件的input事件，更新父组件的value值
      },
    },
  },
};
</script>

在父组件中，我们使用v-model指令来绑定一个名为message的数据属性，并将其传递给子组件。在子组件中，我们使用props接收父组件传递的value值，并通过计算属性localValue实现父子组件之间的双向绑定。当子组件的输入框的值发生变化时，会触发input事件，通过$emit方法将新的值传递给父组件，从而更新父组件的message值。

这样，当在子组件中输入值时，父组件的message值也会随之更新，同时父组件中的message值变化也会反映在子组件中