Vue 组件如何传递函数

在 Vue 开发中，组件之间传递函数是一项非常重要的技能，它有助于实现组件间的交互与通信，从而构建出更加灵活和可维护的应用程序。

我们来看父组件向子组件传递函数。在父组件的模板中，我们定义一个函数，然后将其作为一个 prop 传递给子组件。例如：

<template>
  <div>
    <child-component :parentFunction="parentFunction"></child-component>
  </div>
</template>

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

export default {
  components: {
    childComponent
  },
  methods: {
    parentFunction() {
      console.log('This is a function from parent');
    }
  }
};
</script>

在子组件中，通过 props 接收这个函数，并在需要的时候调用它。

<template>
  <button @click="parentFunction">Click me</button>
</template>

<script>
export default {
  props: {
    parentFunction: {
      type: Function
    }
  }
};
</script>

这样，当用户点击子组件中的按钮时，就会触发父组件传递过来的函数。

接着是子组件向父组件传递函数。这通常是通过自定义事件来实现的。在子组件中定义一个方法，然后通过 $emit 触发一个自定义事件，并将该方法作为参数传递出去。

<template>
  <button @click="sendFunctionToParent">Send Function</button>
</template>

<script>
export default {
  methods: {
    childFunction() {
      console.log('This is a function from child');
    },
    sendFunctionToParent() {
      this.$emit('childFunctionEvent', this.childFunction);
    }
  }
};
</script>

在父组件中监听这个自定义事件，并接收传递过来的函数。

<template>
  <div>
    <child-component @childFunctionEvent="receiveFunction"></child-component>
  </div>
</template>

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

export default {
  components: {
    childComponent
  },
  methods: {
    receiveFunction(func) {
      func();
    }
  }
};
</script>

通过上述方法，我们就可以在 Vue 组件之间灵活地传递函数，实现组件之间的高效交互。掌握组件间函数传递的技巧，能让我们在构建 Vue 应用时更加得心应手，提升开发效率与代码质量。无论是简单的 UI 交互，还是复杂的业务逻辑处理，都能通过合理的组件通信与函数传递来实现。