当前位置：首页 > ai >正文

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

ai 2025/6/17 17:07:23

在 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>

推荐方案对比

方法	优点	适用场景
`ref` 直接调用	直接高效，逻辑清晰	父组件直接控制子组件特定操作
Props 回调函数	符合单向数据流	需要传递数据到父组件的情况
自定义事件	符合组件解耦原则	子组件主动通知父组件的场景