子组件如何把函数传给父组件
时间: 2023-09-20 18:08:48 浏览: 81
React 子组件向父组件传值的方法
5星 · 资源好评率100%
在Vue框架中,子组件可以通过事件将函数传递给父组件。具体的步骤如下:
1. 在子组件中,使用`$emit`方法触发一个自定义事件,并将需要传递的函数作为参数传入。例如:
```javascript
// 子组件
methods: {
handleClick() {
this.$emit('custom-event', this.myFunction);
},
myFunction() {
// 函数逻辑...
}
}
```
2. 在父组件中,使用`v-on`或简写的`@`指令监听子组件触发的自定义事件,并在对应的方法中接收传递的函数参数。例如:
```html
<!-- 父组件 -->
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleCustomEvent(func) {
// 执行传递过来的函数
func();
}
}
}
</script>
```
通过以上步骤,你可以将子组件中的函数传递给父组件,并在父组件中执行该函数。
阅读全文