记一笔vue中的中央事件总线的问题,以及解决方案

代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bus[中央事件总线]

  <div class="" v-if="!showScan">
      <HeaderNav/>
      <router-view/>
  </div>

问题描述:就是在页面上用按钮点击切换路由的时候了,header是可以正常切换的,但是如果是地址栏上直接输入路由进入的时候了,就驴头不对马口了。

HeaderNav.vue中逻辑代码

methods: {
.....
watchChangeHeader () {
      this.bus.$on(‘changeHeader‘, info => {
        debugger
        if (info) {
          setInStorage(‘headerLag‘,info.headerLag)
          this.headerLag = info.headerLag
          setInStorage(‘title‘,info.title)
          this.title = info.title
        } else {
           this.headerLag =‘‘
           setInStorage(‘headerLag‘,‘‘)
        }
      })
    }
.....
}
  mounted () {
    this.watchChangeHeader()
  },

 内容组件的逻辑代码: 

  created () {
    console.log(‘framework created‘)
    this.bus.$emit(‘changeHeader‘,‘‘)
  }

 以上只是代码片段....

首先要进行科普下:

1)$emit时,必须已经$on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的 

  这个可能就是问题的原因,问题就是在一个组件$emit()的时候,他的兄弟组件并没有$on(),这就无法导致能够响应,因此我就改了下代码,将HeaderNav.vue,果然问题解决了。。。

 created() {
    this.watchChangeHeader()
  },

  但是我还有一个疑问???为什么页面点击按钮切换路由是正确的,但是直接输入路由就不行啦?????

经过一翻手动验证,发现了这一问题的原因。在页面点击按钮切换路由的时候,我们重新渲染的只是<router-view />这个路由组件对应的内容,由于HederBNav这个组件一直存在不会重新的created,mounted,意思就是说在嫩内容组件$emit的时候,HeaderNav组件的$on一直存在,所以没问题。但是如果我们直接地址栏上输入路由地址进行页面切换,本质上已经不是单页面了,这会造成整个代码会重新加载运行,这个时候在内容组件created()发出$emit(),HeaderNav还没有被挂在完成(mounted),也就不存在$on,所以就会有问题。

 

原文地址:https://www.cnblogs.com/evaling/p/9192728.html

时间: 2024-11-07 22:57:57

记一笔vue中的中央事件总线的问题,以及解决方案的相关文章

Vue bus的使用(兄弟|非父子组件传值)--&gt;可以使用一个空的Vue实例作为中央事件总线new Vue()

1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) methods:{        handleClicks(){        this.bus.$emit('openMenu',true)       } } 父组建使用:  this.bus.$on("自定义事件名", msg => {}) mounted() {    this.bus

组件之间的通讯:兄弟组件之间的相互通讯(中央事件总线)

组件之间的通讯: 父->子:通过props,data属性, 子->父:通过派发事件 兄弟组件:中央事件总线(......data{ Bus:new Vue()}.....) 更为复杂的通讯:就是用vuex 关于兄弟组件之间的通讯官档上推荐使用中央事件总线,我们也确实是这样做的, 中央事件总线,其实就是在父组件data中在实例化话一个vue实例,用于管理组件之间的通讯 假设我们有一个组件A,和B,他们之间的要进行数据通讯,那么他们之间肯定要建立某种联系,这个联系人就是父组件,联系地址就是中央事件

vue中常用的事件和修饰符简单总结

1:阻止冒泡事件 JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失.在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在"泡泡"离开对象之前刺破它. 在vue中怎么写? 2:阻止默认行为 在vue中怎么写? 3:键盘事件 获取键码?通过事件对象来获取 注意:keydown事件和keyup事件的区别? keydown是在键

vue中的滚动事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

vue中使用触摸事件,上滑,下滑,等

第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vueTouch) kim-vue-touch提供了点击.长按.左滑.右滑.上滑.下滑等事件, 当你不需要传参时可以通过v-tap="vueTouch"的形式调用方法, 当你需要传参时v-tap="(e)=>vueTouch('点击',e)"的方式调用,e是event

vue中触发键盘事件的两种方法和如何自定义键位事件,完整代码!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue中bus.$on事件被多次绑定

问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) bus.$off('pagechangep'); //先解绑,不然会多次出发 bus.$on('pagechangep',function(i){ that.publishpageTo(i); }); 解决办法二:注册的总线事件(Bus)要在组件销毁时(beforeDestroy/destroyed)

vue中的阻止事件冒泡

stop阻止事件冒泡 prevent阻止系统默认事件 once只添加一次事件 <div :id="msg" @click.prevent.stop.once="method()">a</div> 原文地址:https://www.cnblogs.com/H5lcy/p/11650806.html

vue中的键盘事件

@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13     按回车键 @keyup.enter 回车 @keyup.up    上键 @keyup.down  下键 @keyup.left     左键 @keyup.right    右键 @keyup.delete    删除键 原文地址:https://www.cnblogs.com/xuepei/p/11988371.html