在Vue 3中，父子组件之间的通信有多种方式（应用场景）

vueCopy Code<template>
  <Child :message="parentMessage" />
</template>

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

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

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

<script>
export default {
  props: ['message']
}
</script>

vueCopy Code<template>
  <Child @child-message="handleChildMessage" />
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    handleChildMessage(message) {
      console.log('Received from child:', message);
    }
  }
}
</script>

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

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

vueCopy Code<template>
  <Child />
</template>

<script>
import { provide } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    provide('parentMessage', 'Hello from ancestor');
  }
}
</script>

vueCopy Code<template>
  <div>{{ message }}</div> // 使用在后代组件中，同理可以注入在更深层组件中。 例如 Descendant.vue 中也可以使用。 只需确保祖先组件已经提供了该值。 例如：const message = inject('parentMessage'); 然后在模板中使用 {{ message }}。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject('parentMessage'); 然后就可以在模板中使用 {{ message }} 了。 这里的代码片段展示了如何在子组件中使用。 如果是更深层后代，则在相应组件中同样使用 inject 并赋值给一个变量即可。 例如：const message = inject