Vue 3 提供了一些机制来实现跨组件通信和传值，让你可以在不同组件之间共享状态和触发通知。以下是一些常见的跨组件通信和传值方法：

1. Props 和 Emit

使用 props 和 emit 是父子组件之间通信的标准方式。你可以将父组件的数据通过 props 传给子组件，然后子组件可以通过 $emit 方法触发一个事件来将数据传回给父组件。

父组件:

<template>
  <ChildComponent :value="value" @childEvent="handleChildEvent" />
</template>

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

export default {
  data() {
    return {
      value: 'some value',
    };
  },
  methods: {
    handleChildEvent(newValue) {
      this.value = newValue;
    },
  },
};
</script>

子组件:

<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'new value');
    },
  },
};
</script>

2. Vuex

如果你的应用结构复杂，而且许多组件需要共享状态，Vuex 是一个优秀的解决方案。你可以创建一个集中的存储来保存应用的状态，然后在组件中访问和修改这些状态。

3. provide 和 inject

provide 和 inject 允许祖先组件和其所有后代组件之间建立一个明确的依赖关系，而无需通过 props 逐级传递。

祖先组件:

<script>
export default {
  provide() {
    return {
      value: 'some value',
    };
  },
};
</script>

后代组件:

<script>
export default {
  inject: ['value'],
};
</script>

4. 使用事件总线

在某些情况下，你可能需要非父子组件之间的通信。事件总线可以用于这样的情况。你可以创建一个新的 Vue 实例作为事件总线，并使用 $on 来监听事件和 $emit 来触发事件。

事件总线实例:

import { createApp } from 'vue';

const EventBus = createApp();

export default EventBus;

组件 A:

import EventBus from './EventBus';

export default {
  methods: {
    notifyOtherComponent() {
      EventBus.$emit('event-name', 'some value');
    },
  },
};

组件 B:

import EventBus from './EventBus';

export default {
  mounted() {
    EventBus.$on('event-name', this.handleEvent);
  },
  methods: {
    handleEvent(value) {
      console.log(value); // 'some value'
    },
  },
};

以上这些方法可以根据你的应用的需求和结构来选择合适的跨组件通信和传值方案。