前言

使用Vue自动封装组件时，有时会需要传入一些钩子函数，用于实现一些特殊功能的回调，最常见的就是父子组件交互，有时传入的函数会在组件初始化自动执行，这是为什么？

答案：你在传递函数时使用了()！

实例讲解

html
<MyComponent :back="backup()" />

如上代码，backup()会在 MyComponent 渲染时被立即调用，原因就是在模板中使用了括号 ()，这会导致 Vue 在渲染时立即调用该方法。

解决方法：

将方法名传递而不是直接调用它。你可以去掉括号，将方法作为参数传递，而不是执行方法。

修改后的代码：

html
<MyComponent :back="backup" />

总结

• 组件传入函数带括号，表示立即调用这个函数。
• 组件传入函数不带括号，表示将函数作为一个引用传递给组件，只有在需要时才会调用。

拓展，

以Vue3的最新语法为例，组件内部调用传入函数：

• MyComponent

ts
<script setup lang="ts">
    // 接收函数
    const { back } = defineProps(["back"]);
    const closeme = () => {
        // 调用函数
        back();
    }
</script>