跨组件通讯图
Props（父 → 子）
本质：父组件通过属性向子组件传递数据。
特点：单向数据流，子组件不能直接修改 props。
示例：
<!-- 父组件 -->
<Child :title="parentTitle" /><!-- 子组件 -->
<script>
export default {props: ['title'] // 接收父组件数据
}
</script>
$emit + v-on（子 → 父）
本质：子组件通过事件向父组件传递数据。
示例：
<!-- 子组件 -->
<button @click="$emit('update', newValue)">提交</button><!-- 父组件 -->
<Child @update="handleUpdate" />
provide / inject（依赖注入）
本质：祖先组件提供数据，后代组件注入使用。
特点：适合深层嵌套，但数据流向不透明。
示例：
// 祖先组件
export default {provide() {return { theme: 'dark' }; // 提供数据}
}// 后代组件
export default {inject: ['theme'] // 注入数据
}
任意组件通信（全局状态）
Vuex 是 Vue 官方提供的状态管理库，适用于复杂应用的全局状态管理。它通过一个全局的 store 来管理应用的状态，允许跨组件共享和修改数据。
API官网
核心概念：
- state：存储数据。
- mutations：同步修改数据。
- actions：异步操作。
- getters：计算属性。
安装
npm install vuex@3 --save
创建 Store
// store.js
import { createStore } from 'vuex';export default createStore({state: {globalMessage: 'Hello from Vuex'},mutations: {updateMessage(state, newMessage) {state.globalMessage = newMessage;}},actions: {updateMessage({ commit }, newMessage) {commit('updateMessage', newMessage);}},getters: {globalMessage: (state) => state.globalMessage}
});
在主应用中引入 Store：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';createApp(App).use(store).mount('#app');
在组件中使用：
// 组件中
this.$store.dispatch('updateMessage', 'New Message');
console.log(this.$store.getters.globalMessage);
Pinia 是 Vue 3 推荐的状态管理库，是 Vuex 的替代品，提供了更好的类型支持和更简
安装
npm install pinia
创建 Store
// store.js
import { defineStore } from 'pinia';export const useMessageStore = defineStore('message', {state: () => ({message: 'Hello from Pinia'}),actions: {updateMessage(newMessage) {this.message = newMessage;}}
});
在主应用中引入 Store：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';const app = createApp(App);
app.use(createPinia());
app.mount('#app');
在组件中使用：
// 组件中
import { useMessageStore } from './store';const store = useMessageStore();
store.updateMessage('New Message');
console.log(store.message);
