当前位置：首页 > VUE

vue如何实现父子通信

2026-02-21 14:11:03VUE

父子组件通信方法

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: String
  }
}
</script>

自定义事件通信

子组件通过 $emit 触发事件，父组件监听事件：

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send</button>
</template>

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

<!-- 父组件 -->
<template>
  <ChildComponent @message-from-child="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg) // 输出: Hello from child
    }
  }
}
</script>

v-model 双向绑定

实现父子组件双向数据绑定：

<!-- 父组件 -->
<template>
  <ChildComponent v-model="parentValue" />
</template>

<script>
export default {
  data() {
    return {
      parentValue: ''
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
}
</script>

$refs 访问子组件

父组件通过 ref 直接访问子组件实例：

<!-- 父组件 -->
<template>
  <ChildComponent ref="child" />
  <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>

provide/inject 跨级通信

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

vue如何实现父子通信

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      theme: 'dark'
    }
  }
}
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme) // 输出: dark
  }
}
</script>