Vue3 + JavaScript 父组件点击按钮触发子组件事件方法

在 Vue 3 中，父组件点击按钮触发子组件事件有以下三种常用方式：

方法 1：使用 ref 直接调用子组件方法（推荐）

vue

复制

下载

<!-- 父组件 -->
<template>
  <button @click="callChildMethod">父组件按钮</button>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

function callChildMethod() {
  if (childRef.value) {
    childRef.value.childMethod(); // 直接调用子组件方法
  }
}
</script>

vue

复制

下载

<!-- 子组件 ChildComponent.vue -->
<script setup>
// 暴露给父组件的方法
const childMethod = () => {
  console.log('子组件方法被调用');
  // 执行子组件逻辑
};

// 暴露方法给父组件
defineExpose({
  childMethod
});
</script>

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

vue

复制

下载

<!-- 父组件 -->
<template>
  <button @click="triggerChild">父组件按钮</button>
  <ChildComponent :parentCallback="callback" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const callback = () => {
  console.log('父组件的回调函数被执行');
};

function triggerChild() {
  // 通过触发子组件事件间接执行
  // 实际执行逻辑在子组件内
}
</script>

vue

复制

下载

<!-- 子组件 -->
<template>
  <!-- 接收父组件传递的回调 -->
</template>

<script setup>
const props = defineProps(['parentCallback']);

// 子组件内执行回调
function executeParentCallback() {
  if (props.parentCallback) {
    props.parentCallback();
  }
}

// 暴露方法供父组件调用
defineExpose({ executeParentCallback });
</script>

方法 3：使用自定义事件（子组件触发）

vue

复制

下载

<!-- 父组件 -->
<template>
  <button @click="emitEvent">父组件按钮</button>
  <ChildComponent @child-event="handleEvent" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

function emitEvent() {
  // 触发自定义事件（实际由子组件监听）
}

function handleEvent(data) {
  console.log('收到子组件事件:', data);
}
</script>

vue

复制

下载

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['child-event']);

// 当需要执行时触发事件
function triggerEvent() {
  emit('child-event', { data: '子组件数据' });
}

defineExpose({ triggerEvent });
</script>

推荐方案对比

最佳实践建议：

1. 需要直接控制子组件行为时 → 使用 ref 方法

2. 需要子组件返回数据时 → 使用 Props 回调

3. 实现组件解耦时 → 使用自定义事件

根据你的具体场景选择最合适的方式，通常 ref 直调是最直接高效的解决方案。