Vue中组件通信的8种实现方法与对比的完整指南

// 父组件
<template>
  <child-component 
    :message="parentMessage" 
    @child-clicked="handleChildClick"
  />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '这是爸爸给你的数据'
    }
  },
  methods: {
    handleChildClick(data) {
      console.log('儿子告诉我：', data)
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sendToParent">点击告诉爸爸</button>
</template>

<script>
export default {
  props: ['message'], // 接收爸爸给的数据
  methods: {
    sendToParent() {
      this.$emit('child-clicked', '爸爸，我完成任务了！')
    }
  }
}
</script>

// 爷爷组件
<parent-component :title="标题" :content="内容" @custom-event="handleEvent"/>

// 父组件（中间人）
<template>
  <child-component v-bind="$attrs" v-on="$listeners"/>
</template>

<script>
export default {
  // 注意：这里不声明props，$attrs会自动包含所有未声明的属性
}
</script>

// 子组件（最终接收者）
export default {
  props: ['title', 'content'], // 直接接收爷爷传来的属性
  mounted() {
    this.$emit('custom-event') // 直接触发爷爷的事件
  }
}

// 中间组件
<child-component v-bind="$attrs"/>

// 父组件
<template>
  <child-component ref="myChild"/>
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      // 通过ref直接调用子组件方法
      this.$refs.myChild.doSomething()
      
      // 或者通过$children（不常用，因为顺序可能变化）
      this.$children[0].doSomething()
    }
  }
}
</script>

// 子组件
<script>
export default {
  methods: {
    doSomething() {
      // 直接找父组件
      this.$parent.parentMethod()
    }
  }
}
</script>

// 爷爷组件
<script>
export default {
  provide() {
    return {
      grandpaData: '这是爷爷给的数据',
      grandpaMethod: this.someMethod
    }
  },
  methods: {
    someMethod() {
      console.log('爷爷的方法被调用了')
    }
  }
}
</script>

// 孙子组件（跳过父组件）
<script>
export default {
  inject: ['grandpaData', 'grandpaMethod'],
  mounted() {
    console.log(this.grandpaData) // 直接使用爷爷的数据
    this.grandpaMethod() // 直接调用爷爷的方法
  }
}
</script>

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A（发送事件）
<script>
import { EventBus } from './event-bus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', '你好，另一个组件！')
    }
  }
}
</script>

// 组件B（接收事件）
<script>
import { EventBus } from './event-bus.js'

export default {
  mounted() {
    EventBus.$on('message-sent', (message) => {
      console.log('收到消息：', message)
    })
  },
  // 记得在组件销毁时移除监听，避免内存泄漏
  beforeDestroy() {
    EventBus.$off('message-sent')
  }
}
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    user: null
  },
  mutations: {
    // 同步修改状态
    increment(state) {
      state.count++
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    // 异步操作
    async fetchUser({ commit }) {
      const user = await api.getUser()
      commit('setUser', user)
    }
  },
  getters: {
    // 计算属性
    doubleCount: state => state.count * 2
  }
})

// 组件中使用
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    fetchUser() {
      this.$store.dispatch('fetchUser')
    }
  }
}
</script>

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

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// 组件中使用
<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

// 直接访问和修改状态（Pinia会自动处理）
counter.count++
counter.increment()

// 使用计算属性
const doubleValue = computed(() => counter.doubleCount)
</script>

// shared-state.js
import { reactive } from 'vue'

export const sharedState = reactive({
  message: '',
  updateMessage(newMessage) {
    this.message = newMessage
  }
})

// 组件A
<script setup>
import { sharedState } from './shared-state'

const updateSharedMessage = () => {
  sharedState.updateMessage('来自组件A的消息')
}
</script>

// 组件B
<script setup>
import { sharedState } from './shared-state'
import { watch } from 'vue'

// 监听共享状态的变化
watch(() => sharedState.message, (newMessage) => {
  console.log('消息更新了：', newMessage)
})
</script>