2026年vue中的父子组件传值(vue父子组件传值方法)

vue中的父子组件传值(vue父子组件传值方法)父组件传值给子组件 子组件传值给父组件 父组件调用子组件的方法 子组件调用父组件的方法 广播自定义事件 处理自定义事件 有时候会发生事件只被 emit 触发了一次 但是回调函数却被执行了多次的现象 这种现象往往发生在页面跳转退出后重新进入的时候 产生原因 this root Bus root Bus root Bus on 实际是向 Bus 容器中添加一个事件监听器 当页面跳转时 原来的 vue 组件被注销 但是原来 vue 组件向 Bus 容器中添加的事件监听器并不会被移除 因此



父组件传值给子组件

子组件传值给父组件

父组件调用子组件的方法

子组件调用父组件的方法

广播自定义事件

处理自定义事件

有时候会发生事件只被 emit 触发了一次,但是回调函数却被执行了多次的现象。这种现象往往发生在页面跳转退出后重新进入的时候。

产生原因:

this.root.Bus.root.Bus. root.Bus.on 实际是向 Bus 容器中添加一个事件监听器,当页面跳转时,原来的 vue 组件被注销,但是原来 vue 组件向 Bus 容器中添加的事件监听器并不会被移除。

因此,当下次进入这个 vue 组件对应的页面时,执行到 this. root.Bus.root.Bus. root.Bus.on 时,又会向 Bus 容器中添加一个重复的事件监听器,以此类推,导致 Bus 容器中有很多个一模一样的事件监听器,从而导致事件只被触发一次,但是回调函数被执行多次的现象。

解决方案:

在 vue 组件的 beforeDetory 钩子函数中将本 vue 组件往 Bus 容器中添加的时间监听器全部手动移除。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Java架构师必看。

今天的文章 2026年vue中的父子组件传值(vue父子组件传值方法)分享到此就结束了,感谢您的阅读。
编程小号
上一篇 2026-02-24 18:01
下一篇 2025-06-06 15:11

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/48047.html