Vue全局事件总线(任意组件间通信)

简介: Vue全局事件总线(任意组件间通信)

建议使用这种方便快捷

Vue 消息订阅与发布 (任意组件间通信)

父传子使用

使用props


全局事件总线比较适用于 子 传递 父亲

安装全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
    //挂载到VC
  }
}).$mount('#app')

beforeCreate 生命周期:无法通过VM访问data数据 和 methods 方法 生命周期的第一个函数

定义事件总线

$emit:定义

$on:接收使用

发送者:

<button @click="snedData()">登录传递用户名</button>
snedData() { this.$bus.$emit('send', 666, 'dpc')  }    

调用事件总线

$on:接收使用

接收者:

created() { this.getData() },
    methods:
    {
        getData() {
            this.$bus.$on('send', (data, str) =>
            {
                console.log(data, str)
            })
        }
    },    

销毁事件总线

使用完后销毁,不妨碍其他组件的使用

beforeDestroy:销毁之前

beforeDestroy() {
        this.$bus.$off('send')
    }


相关文章
|
11天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
11天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
23天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
27天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
30 4
|
26天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
24 1
|
27天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
32 2
|
27天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
26 1
|
28天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
49 1
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
4天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
下一篇
无影云桌面