Vue 组件通信
vue 组件间通信方式：
1. Props / Emits（父子通信）
适用场景：父传子 / 子传父
- 父传子：通过 props 向子组件传值。
- 子传父：通过 emits 派发事件。
vue
<!-- Parent.vue -->
<Child :msg="parentMsg" @update="handleUpdate" />
<!-- Child.vue -->
<script setup>
defineProps(['msg']);
const emit = defineEmits(['update']);
emit('update', newValue);
</script>2. provide / inject（祖先 -> 后代）
适用场景：跨多层组件传递数据，非响应式默认。
vue
<!-- Provider.vue -->
<script setup>
import { provide } from 'vue';
provide('theme', 'dark');
</script>
<!-- Any descendant.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme'); // 'dark'
</script>✅ 若要 响应式注入，需 provide(ref(...))，子组件接收到的是响应式的值
3.Pinia / Vuex（全局状态管理）
js
// store.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({ name: 'Alice' })
});vue
<script setup>
const user = useUserStore();
console.log(user.name);
</script>