v-model实现组件间通信

v-model是Vue.js中用于实现组件间双向绑定的指令。它结合了v-bind和v-on:input指令，可以方便地实现父子组件间的通信。

下面是一个使用v-model实现父子组件间通信的示例：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent v-model="message"></ChildComponent>
    <p>父组件中的message值：{{ message }}</p>
  </div>
</template>

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

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

子组件（ChildComponent.vue）：

<template>
  <div>
    <h3>子组件</h3>
    <input type="text" v-model="value">
    <p>子组件中的value值：{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: ['value'],
  emits: ['update:value'],
  methods: {
    updateValue(event) {
      this.$emit('update:value', event.target.value);
    }
  },
  watch: {
    value(newValue) {
      this.$emit('update:value', newValue);
    }
  }
};
</script>

在父组件中，我们使用v-model指令将父组件的message属性与子组件的value属性进行双向绑定。当子组件中的input值发生变化时，会自动更新父组件中的message值。反之，当父组件中的message值发生变化时，也会自动更新子组件中的value值。

这样，父子组件之间就实现了双向通信。