vue3 props传函数
时间: 2024-05-27 14:07:21 浏览: 14
在Vue 3中,我们可以通过props选项传递一个函数。这个函数可以在父组件中定义,并在子组件中使用,以实现更好的组件复用性和可维护性。
具体步骤如下:
1. 在子组件中声明props选项,如下所示:
```
props: {
myFunc: {
type: Function,
required: true
}
}
```
这里的myFunc是我们要传递的函数的名称,type指定了该属性的类型为Function,required表示该属性为必填项。
2. 在父组件中使用子组件时,通过v-bind指令传递函数,如下所示:
```
<template>
<child-component :my-func="handleMyFunc"></child-component>
</template>
<script>
export default {
methods: {
handleMyFunc() {
// 定义处理函数
}
}
}
</script>
```
这里的handleMyFunc就是我们要传递的函数,在子组件中可以通过this.$props.myFunc来访问。
3. 在子组件中使用父组件传递的函数,如下所示:
```
<template>
<button @click="handleClick">点击执行父组件函数</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$props.myFunc();
}
}
}
</script>
```
这里的handleClick函数中通过this.$props.myFunc来调用父组件传递过来的函数。