当前位置：首页 > VUE

vue父子组件如何实现

2026-02-21 02:51:23VUE

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 进行全局状态管理，实现组件间的数据共享和通信。

vue父子组件如何实现