vue父组件给子组件传递回调函数
时间: 2023-05-24 17:05:16 浏览: 180
可以通过在父组件中定义一个函数,然后在子组件中通过props将这个函数传递过去,子组件可以在适当的时候调用这个函数。
例如,在父组件中定义一个名为handleClick的函数:
```
<template>
<div>
<child-component :on-click="handleClick"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
console.log('clicked')
}
}
}
</script>
```
在子组件中接收这个函数并在合适的时候触发:
```
<template>
<button @click="onClick">Click me!</button>
</template>
<script>
export default {
props: {
onClick: {
type: Function,
required: true
}
},
methods: {
onClick() {
this.onClick()
}
}
}
</script>
```
在这个例子中,当用户在子组件中点击按钮时,子组件会调用父组件传递过来的handleClick函数。