<think>我们被要求回答关于
Vue3组件通信的
多种方式。根据提供的引用，我们可以总结出以下通信
方式：
1. 父组件向子组件传递数据（Props）：父组件通过属性向子组件传递数据。
2. 子组件向父组件传递数据（Emit）：子组件通过触发事件向父组件传递数据。
3. 透传Attributes（$attrs）：用于父组件向子组件传递未在子组件props中声明的属性。
4.
使用$parent和$children（在
Vue3中有所变化，可以
使用getCurrentInstance()来获取父组件实例）或者通过defineExpose暴露子组件的属性或方法，然后父组件通过ref来访问。
5. 事件总线（Event Bus）：在
Vue3中，官方推荐
使用mitt等第三方库来实现事件总线，因为
Vue3移除了$on, $off等方法。
6.
使用全局状态管理（如
Vuex或Pinia）进行跨组件通信。
7.
使用provide/inject实现祖先组件和后代组件之间的通信。
注意：引用中提到了1
3种方法，但具体内容没有全部给出。我们可以结合常见的
方式补充完整。
根据
Vue3的常见通信
方式，我们可以列举如下（尽量达到1
3种）：
1. Props
2. Emit / Events
3. v-model (在
Vue3中，v-model是props和emit的语法糖，可以算作一种)
4. ref 和 defineExpose（父组件通过ref获取子组件实例并调用其方法或访问数据）
5. $attrs（包含父作用域中不作为组件props或自定义事件的attribute绑定和事件）
6. provide / inject
7. Event Bus（事件总线，
使用第三方库）
8.
Vuex
9. Pinia（
Vue3推荐的状态管理库）
10.
使用全局属性（app.config.globalProperties）来挂载全局方法或属性
11.
使用模板引用（直接在模板上
使用ref属性，然后在父组件中操作子组件）
12.
使用插槽（Slot）作用域插槽可以实现子组件向父组件传递数据）
1
3.
使用本地存储（如localStorage、sessionStorage）进行通信（虽然不响应式，但可以作为一种通信
方式）
但是，注意引用中提到的1
3种方法可能包括了一些变体。我们结合引用内容进行整理：
引用[1]：Props和Emit。
引用[2]：事件总线（Event Bus）和透传Attributes（$attrs）。
引用[
3]：
使用$parent（在
Vue3中，通过getCurrentInstance获取）和defineExpose。
引用[4]：提到了v-model和事件绑定（但问题部分没有直接回答，我们可以补充）。
引用[5]：再次提到了Props和子组件向父组件传递数据（Emit）。
因此，我们按照1
3种方法进行总结（如果不够1
3种，可以适当补充），并给出简单示例：
1. Props：父组件向子组件传递数据（如上引用示例）
2. Emit：子组件向父组件传递数据（子组件触发事件，父组件监听）
3. v-model：在
Vue3中，一个组件可以有多个v-model绑定，例如：<Child v-model:title="pageTitle" v-model:content="pageContent" />
4. ref 和 defineExpose：子组件
使用defineExpose暴露数据或方法，父组件通过ref获取子组件实例并调用。
5. $attrs：包含父组件传递的未在子组件props中声明的属性和事件。子组件可以通过v-bind="$attrs"传递给内部元素。
6. 插槽（Slot）：默认插槽、具名插槽。作用域插槽允许子组件向父组件传递数据（父组件在插槽内容中
使用子组件的数据）。
7. provide / inject：祖先组件提供数据，后代组件注入数据（可以是响应式数据）。
8. 事件总线（Event Bus）：
使用第三方库（如
mitt）创建事件中心，实现跨组件通信。
9.
Vuex：集中式状态管理，适用于中大型应用。
10. Pinia：新一代状态管理库，与
Vue3更契合。
11. 全局属性（globalProperties）：通过app.config.globalProperties挂载全局方法或属性，组件内通过getCurrentInstance()?.proxy访问。
12. $parent 和 $children（在
Vue3中，官方不推荐直接
使用，但可以通过getCurrentInstance()获取父组件实例，注意谨慎
使用）
1
3.
使用浏览器存储（localStorage, sessionStorage）配合事件监听（如storage事件）实现跨标签页通信，也可以作为组件通信的补充。
下面我们按照这个顺序进行详细说明，并给出部分代码示例（由于引用中已有部分示例，我们将重复的简化，重点给出
Vue3的组合式API写法）：
</think>###
Vue3组件通信的
多种方式
以下是
Vue3中1
3种组件通信
方式的详细说明及代码示例：
1. **Props（父传子）**
父组件通过属性向子组件传递数据：
```
vue
<!-- 父组件 -->
<Child :title="pageTitle" />
<script setup>
import { ref } from &#
39;
vue&#
39;
const pageTitle = ref(&#
39;首页&#
39;)
</script>
```
```
vue
<!-- 子组件 -->
<script setup>
defineProps({
title: { type: String, required: true }
})
</script>
```
2. **Emit（子传父）**
子组件通过事件向父组件传递数据：
```
vue
<!-- 子组件 -->
<button @click="$emit(&#
39;update&#
39;, newValue)">提交</button>
<script setup>
const emit = defineEmits([&#
39;update&#
39;])
</script>
```
```
vue
<!-- 父组件 -->
<Child @update="handleUpdate" />
```
3. **v-model（双向绑定）**
语法糖实现父子组件双向绑定：
```
vue
<!-- 父组件 -->
<Child v-model:count="num" />
```
```
vue
<!-- 子组件 -->
<input :value="count" @input="$emit(&#
39;update:count&#
39;, $event.target.value)">
<script setup>
defineProps([&#
39;count&#
39;])
defineEmits([&#
39;update:count&#
39;])
</script>
```
4. **透传 Attributes（$attrs）**
传递未声明的props：
```
vue
<!-- 父组件 -->
<Child data-id="12
3" class="active" />
```
```
vue
<!-- 子组件 -->
<div v-bind="$attrs">接收透传属性</div>
```
5. **Ref / defineExpose**
父组件直接访问子组件：
```
vue
<!-- 父组件 -->
<Child ref="childRef" />
<script setup>
import { ref } from &#
39;
vue&#
39;
const childRef = ref()
childRef.value.childMethod() // 调用子组件方法
</script>
```
```
vue
<!-- 子组件 -->
<script setup>
defineExpose({
childMethod: () => console.log(&#
39;方法暴露&#
39;)
})
</script>
```
6. **Provide / Inject**
跨层级组件通信：
```
vue
<!-- 祖先组件 -->
<script setup>
import { provide } from &#
39;
vue&#
39;
provide(&#
39;theme&#
39;, &#
39;dark&#
39;) // 提供数据
</script>
```
```
vue
<!-- 后代组件 -->
<script setup>
import { inject } from &#
39;
vue&#
39;
const theme = inject(&#
39;theme&#
39;, &#
39;light&#
39;) // 默认值
</script>
```
7. **事件总线（Event Bus）**
使用第三方库实现全局事件：
```js
// eventBus.js
import
mitt from &#
39;
mitt&#
39;
export default
mitt()
```
```
vue
<!-- 组件A（发送） -->
<script setup>
import e
mitter from &#
39;./eventBus&#
39;
e
mitter.emit(&#
39;message&#
39;, &#
39;Hello!&#
39;)
</script>
```
```
vue
<!-- 组件B（接收） -->
<script setup>
import e
mitter from &#
39;./eventBus&#
39;
e
mitter.on(&#
39;message&#
39;, (msg) => console.log(msg))
</script>
```
8. **全局状态管理（Pinia/
Vuex）**
集中式状态管理：
```ts
// store/counter.js (Pinia)
export const useCounterStore = defineStore(&#
39;counter&#
39;, {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ }
}
})
```
```
vue
<!-- 组件
使用 -->
<script setup>
import { useCounterStore } from &#
39;./store/counter&#
39;
const counter = useCounterStore()
counter.increment()
</script>
```
9. **作用域插槽（Scoped Slots）**
子组件向父组件模板暴露数据：
```
vue
<!-- 子组件 -->
<slot :item="itemData" />
```
```
vue
<!-- 父组件 -->
<Child v-slot="{ item }">
{{ item.name }}
</Child>
```
10. **本地存储通信**
通过Storage API实现数据持久化：
```js
// 组件A
localStorage.setItem(&#
39;sharedData&#
39;, JSON.stringify(data))
```
```js
// 组件B
const data = JSON.parse(localStorage.getItem(&#
39;sharedData&#
39;))
```
11. **路由参数通信**
通过URL传递数据：
```js
// 发送方
router.push({ path: &#
39;/detail&#
39;, query: { id: 12
3 } })
```
```
vue
<!-- 接收方 -->
<script setup>
import { useRoute } from &#
39;
vue-router&#
39;
const route = useRoute()
console.log(route.query.id) // 12
3
</script>
```
12. **$parent / $children**
（不推荐）直接访问组件实例：
```
vue
<script setup>
import { getCurrentInstance } from &#
39;
vue&#
39;
const { parent } = getCurrentInstance()
parent.doSomething() // 访问父组件方法
</script>
```
1
3. **自定义Hook**
复用逻辑的通信
方式：
```ts
// useSharedData.js
import { ref } from &#
39;
vue&#
39;
export default function() {
const sharedData = ref(null)
const updateData = (value) => { sharedData.value = value }
return { sharedData, updateData }
}
```
```
vue
<!-- 组件A/B -->
<script setup>
import useSharedData from &#
39;./useSharedData&#
39;
const { sharedData, updateData } = useSharedData()
</script>
```
---
### 选择建议
1. **父子组件**：优先
使用 `props/emit` 或 `v-model`
2. **兄弟组件**：事件总线/状态管理
3. **深层嵌套**：`provide/inject`
4. **复杂应用**：Pinia全局状态管理
5. **路由相关**：
使用路由参数
[^1]:
Vue 3组件通信1
3种方法
[^2]: 透传Attributes ($attrs)
[^
3]: $parent实例访问
[^4]: 全局组件库引入
方式
[^5]:
Vue3组件间通信的
多种方式
扫一扫
1849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
