Vue實現(xiàn)父子組件通信的八種方式

更新時間：2025年11月11日 09:29:43 作者：良山有風來

你是不是經(jīng)常遇到這樣的場景？父組件的數(shù)據(jù)要傳給子組件，子組件的事件要通知父組件，兄弟組件之間要共享狀態(tài)...每次寫Vue組件通信都覺得頭大，不知道用哪種方式最合適？別擔心！今天我就帶你徹底搞懂Vue

Props：最基礎的父子通信
$emit：子組件向父組件通信
ref：直接訪問子組件實例
Event Bus：任意組件間通信
provide/inject：依賴注入
attrs/attrs/attrs/listeners：跨層級屬性傳遞
Vuex：集中式狀態(tài)管理
Pinia：新一代狀態(tài)管理
實戰(zhàn)場景選擇指南
寫在最后

你是不是經(jīng)常遇到這樣的場景？父組件的數(shù)據(jù)要傳給子組件，子組件的事件要通知父組件，兄弟組件之間要共享狀態(tài)...每次寫Vue組件通信都覺得頭大，不知道用哪種方式最合適？

別擔心！今天我就帶你徹底搞懂Vue組件通信的8種核心方式，每種方式都有詳細的代碼示例和適用場景分析?？赐赀@篇文章，你就能根據(jù)具體業(yè)務場景選擇最合適的通信方案，再也不用為組件間傳值發(fā)愁了！

Props：最基礎的父子通信

Props是Vue中最基礎也是最常用的父子組件通信方式。父組件通過屬性向下傳遞數(shù)據(jù)，子組件通過props選項接收。

// 子組件 ChildComponent.vue
<template>
  <div>
    <h3>子組件接收到的消息：{{ message }}</h3>
    <p>用戶年齡：{{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  // 定義props，可以指定類型和默認值
  props: {
    message: {
      type: String,
      required: true  // 必須傳遞這個prop
    },
    userInfo: {
      type: Object,
      default: () => ({})  // 默認空對象
    }
  }
}
</script>

// 父組件 ParentComponent.vue
<template>
  <div>
    <child-component 
      :message="parentMessage" 
      :user-info="userData"
    />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '來自父組件的問候',
      userData: {
        name: '小明',
        age: 25
      }
    }
  }
}
</script>

適用場景：簡單的父子組件數(shù)據(jù)傳遞，數(shù)據(jù)流清晰明確。但要注意，props是單向數(shù)據(jù)流，子組件不能直接修改props。

$emit：子組件向父組件通信

當子組件需要向父組件傳遞數(shù)據(jù)或觸發(fā)父組件的某個方法時，就需要用到$emit。子組件通過觸發(fā)自定義事件，父組件通過v-on監(jiān)聽這些事件。

// 子組件 SubmitButton.vue
<template>
  <button @click="handleClick">
    提交表單
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 觸發(fā)自定義事件，并傳遞數(shù)據(jù)
      this.$emit('form-submit', {
        timestamp: new Date(),
        formData: this.formData
      })
    }
  }
}
</script>

// 父組件 FormContainer.vue
<template>
  <div>
    <submit-button @form-submit="handleFormSubmit" />
  </div>
</template>

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

export default {
  components: { SubmitButton },
  methods: {
    handleFormSubmit(payload) {
      console.log('接收到子組件的數(shù)據(jù)：', payload)
      // 這里可以處理表單提交邏輯
      this.submitToServer(payload.formData)
    }
  }
}
</script>

適用場景：子組件需要通知父組件某個事件發(fā)生，或者需要傳遞數(shù)據(jù)給父組件處理。

ref：直接訪問子組件實例

通過ref屬性，父組件可以直接訪問子組件的實例，調(diào)用其方法或訪問其數(shù)據(jù)。

// 子組件 CustomInput.vue
<template>
  <input 
    ref="inputRef" 
    v-model="inputValue" 
    type="text"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 子組件的自定義方法
    focus() {
      this.$refs.inputRef.focus()
    },
    clear() {
      this.inputValue = ''
    },
    getValue() {
      return this.inputValue
    }
  }
}
</script>

// 父組件 ParentComponent.vue
<template>
  <div>
    <custom-input ref="myInput" />
    <button @click="handleFocus">聚焦輸入框</button>
    <button @click="handleClear">清空輸入框</button>
  </div>
</template>

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

export default {
  components: { CustomInput },
  methods: {
    handleFocus() {
      // 通過ref直接調(diào)用子組件的方法
      this.$refs.myInput.focus()
    },
    handleClear() {
      // 調(diào)用子組件的清空方法
      this.$refs.myInput.clear()
      
      // 也可以直接訪問子組件的數(shù)據(jù)（不推薦）
      // this.$refs.myInput.inputValue = ''
    }
  }
}
</script>

適用場景：需要直接操作子組件的DOM元素或調(diào)用子組件方法的場景。但要謹慎使用，避免破壞組件的封裝性。

Event Bus：任意組件間通信

Event Bus通過創(chuàng)建一個空的Vue實例作為事件中心，實現(xiàn)任意組件間的通信，特別適合非父子組件的情況。

// event-bus.js - 創(chuàng)建事件總線
import Vue from 'vue'
export const EventBus = new Vue()

// 組件A - 事件發(fā)送者
<template>
  <button @click="sendMessage">發(fā)送全局消息</button>
</template>

<script>
import { EventBus } from './event-bus'

export default {
  methods: {
    sendMessage() {
      // 觸發(fā)全局事件
      EventBus.$emit('global-message', {
        text: 'Hello from Component A!',
        from: 'ComponentA'
      })
    }
  }
}
</script>

// 組件B - 事件監(jiān)聽者
<template>
  <div>
    <p>最新消息：{{ latestMessage }}</p>
  </div>
</template>

<script>
import { EventBus } from './event-bus'

export default {
  data() {
    return {
      latestMessage: ''
    }
  },
  mounted() {
    // 監(jiān)聽全局事件
    EventBus.$on('global-message', (payload) => {
      this.latestMessage = `${payload.from} 說：${payload.text}`
    })
  },
  beforeDestroy() {
    // 組件銷毀前移除事件監(jiān)聽，防止內(nèi)存泄漏
    EventBus.$off('global-message')
  }
}
</script>

適用場景：簡單的跨組件通信，小型項目中的狀態(tài)管理。但在復雜項目中建議使用Vuex或Pinia。

provide/inject：依賴注入

provide和inject主要用于高階組件開發(fā)，允許祖先組件向其所有子孫后代注入依賴，而不需要層層傳遞props。

// 祖先組件 Ancestor.vue
<template>
  <div>
    <middle-component />
  </div>
</template>

<script>
export default {
  // 提供數(shù)據(jù)和方法
  provide() {
    return {
      // 提供響應式數(shù)據(jù)
      appTheme: this.theme,
      // 提供方法
      changeTheme: this.changeTheme,
      // 提供常量
      appName: '我的Vue應用'
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  methods: {
    changeTheme(newTheme) {
      this.theme = newTheme
    }
  }
}
</script>

// 深層子組件 DeepChild.vue
<template>
  <div :class="`theme-${appTheme}`">
    <h3>應用名稱：{{ appName }}</h3>
    <button @click="changeTheme('light')">切換亮色主題</button>
    <button @click="changeTheme('dark')">切換暗色主題</button>
  </div>
</template>

<script>
export default {
  // 注入祖先組件提供的數(shù)據(jù)
  inject: ['appTheme', 'changeTheme', 'appName'],
  
  // 也可以指定默認值和來源
  // inject: {
  //   theme: {
  //     from: 'appTheme',
  //     default: 'light'
  //   }
  // }
}
</script>

適用場景：組件層級很深，需要避免props逐層傳遞的麻煩。常用于開發(fā)組件庫或大型應用的基礎配置。

attrs/attrs/attrs/listeners：跨層級屬性傳遞

attrs包含了父組件傳入的所有非props屬性，attrs包含了父組件傳入的所有非props屬性，attrs包含了父組件傳入的所有非props屬性，listeners包含了父組件傳入的所有事件監(jiān)聽器，可以用于創(chuàng)建高階組件。

// 中間組件 MiddleComponent.vue
<template>
  <div>
    <!-- 傳遞所有屬性和事件到子組件 -->
    <child-component v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  inheritAttrs: false, // 不讓屬性綁定到根元素
  mounted() {
    console.log('$attrs:', this.$attrs) // 所有非props屬性
    console.log('$listeners:', this.$listeners) // 所有事件監(jiān)聽器
  }
}
</script>

// 最終子組件 ChildComponent.vue
<template>
  <input
    v-bind="$attrs"
    v-on="$listeners"
    class="custom-input"
  />
</template>

<script>
export default {
  mounted() {
    // 可以直接使用父組件傳遞的所有屬性和事件
    console.log('接收到的屬性：', this.$attrs)
  }
}
</script>

// 父組件使用
<template>
  <middle-component
    placeholder="請輸入內(nèi)容"
    maxlength="20"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

適用場景：創(chuàng)建包裝組件、高階組件，需要透傳屬性和事件的場景。

Vuex：集中式狀態(tài)管理

Vuex是Vue的官方狀態(tài)管理庫，適用于中大型復雜應用的狀態(tài)管理。

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0,
      user: null,
      loading: false
    }
  },
  mutations: {
    // 同步修改狀態(tài)
    increment(state) {
      state.count++
    },
    setUser(state, user) {
      state.user = user
    },
    setLoading(state, loading) {
      state.loading = loading
    }
  },
  actions: {
    // 異步操作
    async login({ commit }, credentials) {
      commit('setLoading', true)
      try {
        const user = await api.login(credentials)
        commit('setUser', user)
        return user
      } finally {
        commit('setLoading', false)
      }
    }
  },
  getters: {
    // 計算屬性
    isLoggedIn: state => !!state.user,
    doubleCount: state => state.count * 2
  }
})

// 組件中使用
<template>
  <div>
    <p>計數(shù)器：{{ count }}</p>
    <p>雙倍計數(shù)：{{ doubleCount }}</p>
    <p v-if="isLoggedIn">歡迎，{{ user.name }}！</p>
    <button @click="increment">增加</button>
    <button @click="login" :disabled="loading">
      {{ loading ? '登錄中...' : '登錄' }}
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    // 映射state和getters到計算屬性
    ...mapState(['count', 'user', 'loading']),
    ...mapGetters(['doubleCount', 'isLoggedIn'])
  },
  methods: {
    // 映射mutations和actions到方法
    ...mapMutations(['increment']),
    ...mapActions(['login'])
  }
}
</script>

適用場景：中大型復雜應用，多個組件需要共享狀態(tài)，需要嚴格的狀態(tài)管理流程。

Pinia：新一代狀態(tài)管理

Pinia是Vue官方推薦的新一代狀態(tài)管理庫，相比Vuex更加輕量、直觀，并且完美支持TypeScript。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: '我的計數(shù)器'
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2,
    // 使用this訪問其他getter
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  },
  
  actions: {
    increment() {
      this.count++
    },
    async incrementAsync() {
      // 異步action
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    },
    reset() {
      this.count = 0
    }
  }
})

// 組件中使用
<template>
  <div>
    <h3>{{ name }}</h3>
    <p>當前計數(shù)：{{ count }}</p>
    <p>雙倍計數(shù)：{{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">異步增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    
    // 可以直接解構(gòu)，但會失去響應式
    // 使用storeToRefs保持響應式
    const { name, count, doubleCount } = counterStore
    
    return {
      // state和getters
      name,
      count,
      doubleCount,
      // actions
      increment: counterStore.increment,
      incrementAsync: counterStore.incrementAsync,
      reset: counterStore.reset
    }
  }
}
</script>

// 在多個store之間交互
import { useUserStore } from '@/stores/user'

export const useCartStore = defineStore('cart', {
  actions: {
    async checkout() {
      const userStore = useUserStore()
      
      if (!userStore.isLoggedIn) {
        await userStore.login()
      }
      
      // 結(jié)賬邏輯...
    }
  }
})

適用場景：現(xiàn)代Vue應用的狀態(tài)管理，特別是需要TypeScript支持和更簡潔API的項目。