vue实现父子组件通信

Vue 父子组件通信方法

Props 传递数据

父组件通过 props 向子组件传递数据。在子组件中定义 props 接收父组件传递的值。

父组件模板：

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件接收：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
}
</script>

自定义事件 ($emit)

子组件通过 $emit 触发事件，父组件通过 v-on 监听事件并处理。

子组件触发事件：

<template>
  <button @click="sendMessage">Send</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Child data')
    }
  }
}
</script>

父组件监听：

<template>
  <ChildComponent @message-sent="handleMessage" />
</template>
<script>
export default {
  methods: {
    handleMessage(data) {
      console.log(data) // 'Child data'
    }
  }
}
</script>

v-model 双向绑定

实现父子组件数据的双向绑定，本质是 props 和 $emit 的语法糖。

子组件定义：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
  props: ['value']
}
</script>

父组件使用：

<template>
  <ChildComponent v-model="parentData" />
</template>
<script>
export default {
  data() {
    return {
      parentData: ''
    }
  }
}
</script>

$refs 访问子组件

父组件通过 ref 属性直接访问子组件实例和方法。

父组件模板：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child</button>
</template>
<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

子组件定义方法：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called')
    }
  }
}
</script>

$parent 和 $children

子组件通过 $parent 访问父组件实例，父组件通过 $children 访问子组件实例（不推荐，耦合性高）。

子组件访问父组件：

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}
</script>

Provide/Inject

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据（适合跨层级通信）。

祖先组件：

<script>
export default {
  provide() {
    return {
      sharedData: 'Shared value'
    }
  }
}
</script>

后代组件：

<script>
export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData) // 'Shared value'
  }
}
</script>

Event Bus

通过全局事件总线实现任意组件间通信，适合非父子关系组件。

创建事件总线：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

组件A发送事件：

import { EventBus } from './eventBus'
EventBus.$emit('event-name', data)

组件B接收事件：

import { EventBus } from './eventBus'
EventBus.$on('event-name', data => {
  console.log(data)
})

Vuex 状态管理

对于复杂应用，使用 Vuex 集中管理状态，实现组件间共享数据。

store 定义：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

组件中使用：

// 触发 mutation
this.$store.commit('increment')

// 获取状态
this.$store.state.count

方法选择建议

• 简单父子通信：优先使用 props 和 $emit
• 需要双向绑定：使用 v-model
• 跨层级通信：考虑 provide/inject 或 Vuex
• 全局事件：使用 Event Bus
• 复杂状态管理：采用 Vuex

每种方法都有适用场景，根据具体需求选择最合适的方案。