Vue组件通信方式？

一、父子组件通信（最常用）

1. props（父 → 子）

父组件通过 props 向子组件传递数据。

父组件

<template>
  <Child :title="msg" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      msg: 'Hello Vue'
    }
  }
}
</script>

子组件

<script>
export default {
  props: ['title']
}
</script>

子组件可以直接使用 title。

---

2. $emit（子 → 父）

子组件通过 $emit 触发事件通知父组件。

子组件

<template>
  <button @click="send">点击</button>
</template>

<script>
export default {
  methods: {
    send() {
      this.$emit('update', '来自子组件的数据')
    }
  }
}
</script>

父组件

<Child @update="getData" />

methods:{
  getData(val){
    console.log(val)
  }
}

---

二、父子组件通信（高级）

3. ref（父直接调用子）

父组件通过 ref 获取子组件实例。

<Child ref="childRef" />

this.$refs.childRef.childMethod()

适合：

• 调用子组件方法
• 获取子组件数据

---

4. provide / inject（跨层级）

适合 祖先 → 后代组件。

祖组件

provide() {
  return {
    theme: 'dark'
  }
}

子孙组件

inject: ['theme']

---

三、兄弟组件通信

5. EventBus（Vue2常用）

创建一个事件总线。

// bus.js
import Vue from 'vue'
export default new Vue()

发送

bus.$emit('sendMsg', data)

接收

bus.$on('sendMsg', (data)=>{
  console.log(data)
})

⚠️ Vue3 不推荐。

---

四、全局状态管理

6. Vuex（大型项目）

在 Vuex 中统一管理状态。

组件A → commit → store → 组件B

示例：

this.$store.commit('setUser', data)

读取：

this.$store.state.user

---

7. Pinia（Vue3 推荐）

Pinia 是 Vue3 官方推荐状态管理。

const store = useUserStore()

store.name = '张三'

任何组件都可以直接使用。

---

五、插槽通信

8. slot / scoped slot

父组件向子组件传入结构，子组件向父组件返回数据。

<Child>
  <template #default="scope">
    {{ scope.data }}
  </template>
</Child>

---

六、总结（面试高频）

通信方式	场景
props	父 → 子
$emit	子 → 父
ref	父调用子方法
provide/inject	跨层级
EventBus	兄弟组件
Vuex / Pinia	全局状态
slot	组件复用

---

💡 面试标准回答（简洁版）：

Vue组件通信主要有：

1. props / emit（父子通信）
2. ref（父调用子）
3. provide / inject（跨层级）
4. EventBus（兄弟组件）
5. Vuex / Pinia（全局状态管理）
6. slot（插槽通信）