vue父子组件如何实现
Vue 父子组件通信实现方式
Vue 中父子组件通信可以通过以下几种方式实现：
Props 传递数据
父组件通过 props 向子组件传递数据，子组件通过声明 props 接收数据。
<!-- 父组件 -->
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>自定义事件
子组件通过 $emit 触发自定义事件，父组件通过 v-on 监听事件并执行相应逻辑。
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from child')
}
}
}
</script>
<!-- 父组件 -->
<template>
<child-component @message="handleMessage"></child-component>
</template>
<script>
export default {
methods: {
handleMessage(msg) {
console.log(msg) // 输出: Hello from child
}
}
}
</script>v-model 双向绑定
通过 v-model 实现父子组件数据的双向绑定，实际上是 props 和自定义事件的语法糖。
<!-- 子组件 -->
<template>
<input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
props: ['value']
}
</script>
<!-- 父组件 -->
<template>
<child-component v-model="parentValue"></child-component>
</template>
<script>
export default {
data() {
return {
parentValue: ''
}
}
}
</script>$refs 访问子组件
父组件通过 ref 属性获取子组件实例，直接调用子组件的方法或访问其数据。
<!-- 父组件 -->
<template>
<child-component ref="child"></child-component>
<button @click="callChildMethod">Call Child Method</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 访问子组件实例，但不推荐使用这种方式，因为会破坏组件的封装性。
Provide/Inject
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据，适合跨多级组件通信。
// 祖先组件
export default {
provide() {
return {
theme: 'dark'
}
}
}
// 后代组件
export default {
inject: ['theme'],
created() {
console.log(this.theme) // 输出: dark
}
}事件总线
通过创建一个 Vue 实例作为事件总线，实现任意组件间的通信。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A
EventBus.$emit('event-name', data)
// 组件B
EventBus.$on('event-name', data => {
// 处理数据
})Vuex 状态管理
对于复杂应用，可以使用 Vuex 进行全局状态管理，实现组件间的数据共享和通信。
以上方法可以根据具体场景选择使用，简单通信推荐使用 props 和自定义事件，复杂场景考虑使用 Vuex 或事件总线。
