用vue3实现两个组件传递不同的数据

在 Vue 3 中，可以使用 `props` 和 `emit` 来实现两个组件之间传递数据。

首先，在父组件中定义一个数据，并将其通过 `props` 传递给子组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

然后，在子组件中使用 `props` 接收父组件传递的数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

接下来，我们可以使用 `emit` 在子组件中触发一个自定义事件，并将数据传递给父组件：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child component');
    }
  }
}
</script>

在父组件中，我们可以监听子组件触发的自定义事件，并在回调函数中获取子组件传递的数据：

<template>
  <div>
    <child-component 
      :message="parentMessage" 
      @message-sent="handleMessageSent"
    ></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  },
  methods: {
    handleMessageSent(message) {
      console.log(message);
    }
  }
}
</script>

以上就是使用 `props` 和 `emit` 在 Vue 3 中实现两个组件之间传递不同数据的方法。