用vue3实现两个组件相互传递数据

在Vue 3中，可以使用`v-model`指令和`emit`事件来实现两个组件之间的数据传递。

假设有两个组件，一个是父组件`Parent`，一个是子组件`Child`，我们需要在这两个组件之间传递数据。

首先，在`Parent`组件中定义一个变量`message`，并将其作为`Child`组件的属性传递给它：

<template>
  <Child v-model="message" />
</template>

<script>
import Child from '@/components/Child.vue'

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

然后，在`Child`组件中，我们需要在`props`中声明一个名为`value`的属性，并在`Child`组件的模板中使用`v-model`指令来绑定这个属性：

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

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      inputValue: this.value,
    }
  },
  watch: {
    inputValue(val) {
      this.$emit('input', val)
    },
  },
}
</script>

在`Child`组件中，我们定义了一个`inputValue`变量来存储输入框的值，并且在该变量发生变化时，我们使用`this.$emit()`方法触发一个名为`input`的自定义事件，并将`inputValue`的值作为参数传递给它。

最后，在`Parent`组件中，我们可以使用`v-model`指令来绑定`message`变量和`Child`组件的`value`属性，这样就可以实现双向数据绑定了：

<template>
  <Child v-model="message" />
  <div>{{ message }}</div>
</template>

<script>
import Child from '@/components/Child.vue'

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

这样，当`Child`组件的输入框发生变化时，`Parent`组件中的`message`变量也会发生相应的变化，并且可以在`Parent`组件的模板中显示出来。