vue组件中函数,将函数传递给父组件
时间: 2023-08-18 11:09:05 浏览: 46
在Vue组件中,如果想要将一个函数传递给父组件,可以使用自定义事件。下面是一个示例:
在子组件中,定义一个方法,并在需要的时候通过 `$emit` 方法触发自定义事件,并将函数作为参数传递:
```javascript
// 子组件
<template>
<button @click="handleClick">点击按钮</button>
</template>
<script>
export default {
methods: {
handleClick() {
// 假设我们要传递的函数是doSomething
this.$emit('custom-event', this.doSomething);
},
doSomething() {
// 这是我们要传递的函数
console.log('执行某些操作');
}
}
}
</script>
```
然后,在父组件中,通过监听子组件触发的自定义事件,获取传递的函数,并在需要的地方调用它:
```javascript
// 父组件
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(func) {
// 在这里调用传递过来的函数
func();
}
}
}
</script>
```
通过这种方式,你可以将子组件中的函数传递给父组件,并在父组件中调用它。