Vue子组件调用父组件的3种方法（附代码演示）

一、组件通信背景

在Vue开发中，父子组件通信是常见需求。遵循单向数据流原则，子组件通常通过触发事件的方式与父组件交互。以下是3种常用方法：

二、方法实现

方法1：$emit触发自定义事件（推荐）

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

<!-- 父组件 Parent.vue -->
<template>
  <Child @show-message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log('收到子组件消息:', msg)
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

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

方法2：通过Props传递回调函数

原理：父组件通过props传递函数，子组件直接调用

<!-- 父组件 Parent.vue -->
<template>
  <Child :callback="handleCallback" />
</template>

<script>
export default {
  methods: {
    handleCallback(data) {
      console.log('回调数据:', data)
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="executeCallback">执行回调</button>
</template>

<script>
export default {
  props: ['callback'],
  methods: {
    executeCallback() {
      this.callback({ status: 'success' })
    }
  }
}
</script>

方法3：使用v-model/.sync（双向绑定）

原理：通过双向绑定语法糖实现数据同步（Vue2/Vue3实现不同）

Vue2实现：

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model="message" />
  <!-- 或 -->
  <Child :visible.sync="dialogVisible" />
</template>

<script>
export default {
  data() {
    return {
      message: '',
      dialogVisible: false
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<script>
export default {
  props: ['value'], // v-model默认prop
  methods: {
    updateValue() {
      this.$emit('input', 'new value')
    },
    closeDialog() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

Vue3实现：

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model:message="msg" />
</template>

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['update:message'])

const update = () => {
  emit('update:message', 'new value')
}
</script>

三、方法对比

方法	适用场景	优点	注意事项
$emit	常规事件通信	符合Vue设计模式，直观清晰	事件名需保持一致
Props回调	需要传递多个函数时	类似React模式，灵活度高	需注意函数引用稳定性
v-model	表单组件/双向绑定需求	语法简洁，减少代码量	Vue2/Vue3实现方式不同
.sync修饰符	多个prop需要双向绑定（Vue2特有）	简化多个prop更新逻辑	Vue3中已合并到v-model语法

四、最佳实践建议

优先使用$emit：符合Vue的事件驱动设计理念
复杂场景使用Vuex/Pinia：跨层级组件通信建议使用状态管理工具
注意版本差异：
- Vue2使用.sync需要显式声明
- Vue3使用v-model:propName形式
保持单向数据流：避免直接修改父组件传递的props

五、常见应用场景

表单提交数据回传
模态框关闭控制
列表项状态更新
复杂组件的状态联动

标签