2024-09-28
温故知新
00

目录

前言
实例讲解
解决方法:
总结
拓展,

前言

使用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>
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!