vue3 Props 传函数

在Vue 3中，你可以使用props来传递函数。首先，在父组件中定义一个函数，并将其作为prop传递给子组件。在子组件中，你可以通过props来接收并使用这个函数。

下面是一个示例：

// 父组件
<template>
  <div>
    <ChildComponent :myFunction="parentFunction" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentFunction() {
      // 在这里定义父组件的函数逻辑
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="myFunction">点击我</button>
  </div>
</template>

<script>
export default {
  props: {
    myFunction: {
      type: Function,
      required: true
    }
  }
}
</script>

在这个示例中，父组件定义了一个名为`parentFunction`的函数，并将其作为prop传递给子组件`ChildComponent`。子组件接收到这个函数，并通过点击按钮来调用它。

请确保在父组件中将函数绑定到子组件的prop时，不要在函数名后面加上括号，否则函数会立即调用。而是直接将函数名作为prop的值即可，在子组件内部通过`myFunction`来调用这个函数。

希望这个示例对你有帮助！