vue2props传递函数

在 Vue 2 中，可以通过 props 来传递函数。以下是一个简单的示例：

首先，在父组件中，我们定义一个函数，并将其作为 prop 传递给子组件：

<template>
  <div>
    <ChildComponent :myFunction="myFunction" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from parent",
    };
  },
  methods: {
    myFunction() {
      console.log("Function called from parent");
    },
  },
};
</script>

然后，在子组件中，接收该函数作为 prop，并在需要的地方调用它：

<template>
  <div>
    <button @click="callParentFunction">Call Parent Function</button>
  </div>
</template>

<script>
export default {
  props: {
    myFunction: {
      type: Function,
      required: true,
    },
  },
  methods: {
    callParentFunction() {
      this.myFunction();
    },
  },
};
</script>

现在，当点击子组件中的按钮时，将调用父组件中传递的函数。