vue实现父子组件

Vue 父子组件通信实现方法

父组件向子组件传递数据（Props）

父组件通过自定义属性向子组件传递数据，子组件通过props接收。父组件中：

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件的数据'
    }
  }
}
</script>

子组件中：

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

子组件向父组件传递数据（自定义事件）

子组件通过$emit触发事件，父组件通过v-on监听。子组件中：

<template>
  <button @click="sendData">传递数据</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('child-event', '子组件数据')
    }
  }
}
</script>

父组件中：

<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log(data) // 输出：子组件数据
    }
  }
}
</script>

使用 ref 直接访问子组件

父组件通过ref属性获取子组件实例。父组件中：

<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod()
    }
  }
}
</script>

子组件中：

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

使用 provide/inject 跨层级传递

祖先组件通过provide提供数据，后代组件通过inject接收。祖先组件中：

<script>
export default {
  provide() {
    return {
      sharedData: '共享数据'
    }
  }
}
</script>

后代组件中：

<script>
export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData) // 输出：共享数据
  }
}
</script>

使用事件总线（Event Bus）

创建全局事件中心实现任意组件间通信。创建事件总线：

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

发送事件组件：

import { EventBus } from './eventBus.js'
EventBus.$emit('custom-event', '事件数据')

接收事件组件：

import { EventBus } from './eventBus.js'
EventBus.$on('custom-event', data => {
  console.log(data) // 输出：事件数据
})

使用 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++
    }
  }
})

组件中访问和修改：

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

// 提交变更
this.$store.commit('increment')