首页 > 其他分享 >兄弟组件传值

兄弟组件传值

时间:2022-10-15 13:55:56浏览次数:43  
标签:... 定义 eventName 兄弟 param2 组件 EventBus 监听 传值

https://www.bilibili.com/video/BV1Hu411r7dt/?spm_id_from=333.337.search-card.all.click&vd_source=d87a0cdb006a04b60ce265a9ce85d6af



eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。

1、初始化——全局定义

全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();
2、触发事件

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)
3、监听事件

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
//需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
//需要执行的代码
})
4、移除监听事件

为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName');


原文链接:https://blog.csdn.net/qq_26834399/article/details/106387585

标签:...,定义,eventName,兄弟,param2,组件,EventBus,监听,传值
From: https://www.cnblogs.com/wugh8726254/p/16794050.html

相关文章

  • restframework分页组件的应用
    restframework中提供了优秀的分页组件在settings.py中,填写关于restframework的配置REST_FRAMEWORK={"UNAUTHENTICATED_USER":None,"PAGE_SIZE":4}1.Pag......
  • Jmeter扩展组件:图形监视器-PerfMon (Servers Performance Monitoring)
    1、是什么用于监听服务器CPU、IO、网络等各项指标的组件2、如何实现Jmeter​本身不具备该功能,需要下载第三方实现在服务器端安装监听程序,在测试机端安装接收程序监听程序:Ser......
  • vue-preview图片预览组件的使用
    一、运行命令`npmivue-preview `安装插件。二、在main.js里面进行全局声明。 三、插入缩略图,imgs1为定义的用于存储缩略图数据的属性。   四、获取数据......
  • Jmeter组件:组件执行顺序和作用域
    1、组件执行顺序组件:Jmeter的内置功能,每一个功能都是一个组件元件:元件中存储的都是性质相似的组件(就是对组件的分类管理)各组件之间的排序配置原件(configelements):存储了一些......
  • 组件化的额外补充
    1.$refs的使用在使用vue框架的时候,尽量不要去操作原生的DOM但是某些情况下,在组件中想要直接获取到元素对象或者子组件实例,vue提供了$refs1.1获取元素点击查看代......
  • 组件上的 v-model
    ......
  • uni-app 4.7封装头像组件
    创建free-avart.vue文件<template><image:src="src"mode="widthFix":style="getStyle":class="type"></image></template><script>exportdefault{props:{......
  • uni-app 4.10封装聊天列表组件
    聊天组件free-media-list.vue,如下代码<template><viewhover-class="bg-light"><divclass="flexalign-stretch"><viewclass="flexalign-centerjustify-c......
  • uni-app 4.12开发弹出层组件(一)基础架构
    弹框开发<template><viewclass=""><free-nav-bar:title="'微信(100)'":fixed='true'><templatev-slot="title"></template></free-nav-bar><!--......
  • uni-app 4.13开发弹出层组件(二)弹出关闭功能
    index.nuve页面<template><viewclass=""><free-nav-bar:title="'微信'":noreadnum="1":fixed='true'@openExtend="openExtend"><templatev-slot="title"......