Vue实现组件通信的8种实战方案详解

<!-- 父组件 Parent.vue -->
<template>
  <Child :title="pageTitle" :count="total" />
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '首页', // 要传递的数据
      total: 10
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<script>
export default {
  props: {
    title: String,  // 类型声明
    count: {
      type: Number,
      default: 0    // 默认值
    }
  },
  mounted() {
    console.log(this.title) // 使用父组件传递的值
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="notifyParent">点击我</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 触发自定义事件，并传递数据
      this.$emit('child-clicked', { time: Date.now() })
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child @child-clicked="handleChildEvent" />
</template>

<script>
export default {
  methods: {
    handleChildEvent(payload) {
      console.log('收到子组件消息:', payload.time)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <CustomInput v-model="searchText" />
</template>

<!-- 子组件 CustomInput.vue -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value'] // 必须用value作为prop名
}
</script>

<CustomInput v-model:title="title" v-model:content="content" />

<!-- 父组件 -->
<template>
  <Child ref="childComp" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childComp.doSomething() // 直接调用子组件方法
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  methods: {
    doSomething() {
      console.log('方法被父组件调用了')
    }
  }
}
</script>

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

// 组件A（发送事件）
EventBus.$emit('user-logged', { username: 'Alice' })

// 组件B（监听事件）
EventBus.$on('user-logged', payload => {
  console.log(payload.username)
})

EventBus.$off('user-logged')

// store.js (Vuex示例)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      appTheme: 'dark' // 提供数据
    }
  }
}
</script>

<!-- 后代组件（任意层级） -->
<script>
export default {
  inject: ['appTheme'], // 注入数据
  mounted() {
    console.log(this.appTheme) // 直接访问
  }
}
</script>

<!-- 中间组件（透传所有属性和事件） -->
<template>
  <GrandChild v-bind="$attrs" v-on="$listeners" />
</template>

<!-- Vue3简写 -->
<GrandChild v-bind="$attrs" />