## 前言
使用Vue自动封装组件时，有时会需要传入一些钩子函数，用于实现一些特殊功能的回调，最常见的就是父子组件交互，有时传入的函数会在组件初始化自动执行，这是为什么？
答案：你在传递函数时使用了`()`！
<!-- more -->
## 实例讲解
```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>
```
