vue实现父子组件

Vue 父子组件通信实现方法

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

在父组件中通过 v-bind 或简写 : 将数据传递给子组件。子组件通过 props 接收数据。

父组件代码示例：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件代码示例：

<template>
  <div>{{ message }}</div>
</template>

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

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

子组件通过 $emit 触发自定义事件，父组件通过 v-on 或简写 @ 监听事件。

子组件代码示例：

<template>
  <button @click="sendMessage">Send to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from child')
    }
  }
}
</script>

父组件代码示例：

<template>
  <ChildComponent @message-from-child="handleChildMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message) // 输出: Hello from child
    }
  }
}
</script>

父组件访问子组件（Refs）

父组件可以通过 ref 属性直接访问子组件的属性和方法。

父组件代码示例：

<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">Call Child Method</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('Child method called')
    }
  }
}
</script>

使用 Provide/Inject 跨层级传递数据

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件代码示例：

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

后代组件代码示例：

<script>
export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData) // 输出: Shared data from ancestor
  }
}
</script>

使用事件总线（Event Bus）

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

创建事件总线：

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

发送事件组件：

import { EventBus } from './event-bus.js'

EventBus.$emit('custom-event', 'Some data')

接收事件组件：

import { EventBus } from './event-bus.js'

EventBus.$on('custom-event', data => {
  console.log(data) // 输出: Some data
})