首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue子组件调用父组件

Vue子组件调用父组件的三种方法(附详细代码演示)

2025-07-28 10:01:14 作者：AL.千灯学长

我们在使用vue做前端代码的时候,经常出现父组件调用子组件的场景需求,这篇文章主要介绍了Vue子组件调用父组件的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、组件通信背景

在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

五、常见应用场景

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

到此这篇关于Vue子组件调用父组件的三种方法的文章就介绍到这了,更多相关Vue子组件调用父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！