vue3子组件如何传函数给父组件
时间: 2023-07-19 22:04:12 浏览: 43
在Vue3中,子组件可以通过`$emit`来向父组件发送事件,从而将函数传递给父组件。
举个例子,假设我们有一个子组件`ChildComponent`:
```vue
<template>
<button @click="onClick">点击我</button>
</template>
<script>
export default {
methods: {
onClick() {
// 发送事件,将函数传递给父组件
this.$emit('my-event', () => {
console.log('执行了我的函数');
});
}
}
}
</script>
```
在子组件中,我们给按钮绑定了一个`onClick`方法,当按钮被点击时,我们通过`$emit`发送一个名为`my-event`的事件,并将一个函数作为参数传递给父组件。
在父组件中,我们可以监听这个事件,并在事件回调函数中接收子组件传递的函数:
```vue
<template>
<div>
<child-component @my-event="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleEvent(fn) {
// 执行子组件传递过来的函数
fn();
}
}
}
</script>
```
在父组件中,我们通过`@my-event`监听子组件发送的`my-event`事件,并在`handleEvent`方法中接收子组件传递的函数作为参数。这样,我们就可以在父组件中执行子组件传递过来的函数了。