Vue 3 提供了多种组件间传值和通讯的方式。以下将以长博客的形式，详细解释这些方法及其应用场景。

1. props 向下传值

props 是 Vue 中用于父组件向子组件传递数据的方式。在子组件中，我们可以使用 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!'  };  }  
}  
</script>

子组件

<template>  <div>{{ message }}</div>  
</template>  <script>  
export default {  props: {  message: {  type: String,  required: true  }  }  
}  
</script>

2. 事件（Event）向上传值

当子组件需要向父组件传递数据时，可以使用自定义事件（Custom Event）。在子组件中，使用 $emit 方法触发事件并传递数据，父组件通过监听这个事件来获取数据。

子组件

<template>  <button @click="notifyParent">Notify Parent</button>  
</template>  <script>  
export default {  methods: {  notifyParent() {  this.$emit('child-event', 'Hello from Child!');  }  }  
}  
</script>

父组件

<template>  <div>  <child-component @child-event="handleChildEvent"></child-component>  </div>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  methods: {  handleChildEvent(message) {  console.log(message); // 输出 'Hello from Child!'  }  }  
}  
</script>

3. Vuex 状态管理

对于大型应用或需要全局共享数据的情况，可以使用 Vuex 进行状态管理。Vuex 提供了集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装和配置 Vuex

npm install vuex

创建 Vuex Store

// store.js  
import { createStore } from 'vuex';  export default createStore({  state: {  count: 0  },  mutations: {  increment(state) {  state.count++;  }  }  
});

在 Vue 应用中使用 Vuex

import { createApp } from 'vue';  
import App from './App.vue';  
import store from './store';  const app = createApp(App);  
app.use(store);  
app.mount('#app');

在组件中使用 Vuex

<template>  <div>{{ count }}</div>  <button @click="increment">Increment</button>  
</template>  <script>  
export default {  computed: {  count() {  return this.$store.state.count;  }  },  methods: {  increment() {  this.$store.commit('increment');  }  }  
}  
</script>

希望 以上对您有所帮助