VUE非父子组件通信Bus——公交车踩坑笔记

抛开父子组件的通讯，对于非父子组件通信，简单的数据交互，使用Bus是非常不错的。
遇到的坑有两个。
1.两个组件的信息交互代码写在哪个生命周期函数中，如果只是点击组件A标签触发函数，然后向界面B传递参数，是传递不到的。
2.小车次数越发越多，即一个信息重复发送了好几次

现在开始实现Bus，最快的方法，第一步，从main.js入手，直接在Vue原型上添加bus方法，简单有效

import Vue from 'vue'
import App from './App'
import router from './router'
//关键代码
Vue.prototype.$bus = new Vue();
//关键代码
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

接下来，直接开始组件通信，现在在StationA发车，带着信息，向公交车站B驶去（记得在router.js界面注册车站A和B）

<template><div><div>這裡是stationA,向stationB发送消息</div><router-link to="/stationB">跳转</router-link>.<!-- 通过router-link跳转到StationB，切换下视角，看看我们的信息是否通过小车到了B站 --></div>
</template>
<script>
export default {name: "StationA",data() {return {};},methods: {},beforeDestroy() {// 在生命beforeDestroy生命周期中通过bus传递参数this.$bus.$emit("bus", "this is A");},mounted() {}
};
</script>

为什么要在生命周期beforeDestroy中传递我们的信息呢？Bus的坑之一就是这里。
因为要想让这个信息传递到B站，B站首先得有信息接收点，在A站beforeDestroy发车的时候，我们要在B站搭建好设备等小车开过来，即写在created里的 this.$bus. $on

  created() {this.$bus.$on("bus", hei => {console.log(hei);this.A_msg = hei;});},

来看StationB的代码

<template><div><div>这里是stationB</div><div>这是接收来的参数{{A_msg}}</div></div>
</template><script>
export default {name: "StationB",data() {return {A_msg: "",};},created() {this.$bus.$on("bus", hei => {//接收小车的带来的信息，顺便打印一下this.A_msg = hei;});console.log(this.A_msg);}
};

最后一个坑，先来看看效果，点击跳转

来到了B站，哦传达到了，后台也正常打印一次了

点击返回StationA我们再发一次车，跳转到StationB打印记录从1次直接涨到3次？

我们再发一次车试试

这次从3涨到了6，呈现一个规律+1，+2，+3递增的趋势，好像第一次发了一辆车，第二次发了两辆，第三次发了三辆，这么说问题，已经很清晰了。解决方法如下。
在StationA的生命周期created中添加代码

<template><div><div>這裡是stationA,向stationB发送消息</div><router-link to="/stationB">跳转</router-link></div>
</template><script>
// import Bus from "@/components/bus";
export default {name: "StationA",data() {return {};},methods: {},created() {//新增代码看这里this.$bus.$off("bus");//新增代码看这里},beforeDestroy() {// 在生命beforeDestroy生命周期中通过bus传递参数this.$bus.$emit("bus", "this is A");},mounted() {}
};
</script>

这样就可以把之前存在的小车，取消掉，每次都只发一辆小车。

VUE非父子组件通信Bus——公交车踩坑笔记相关推荐

Vue 非父子组件通信方案
Vue 非父子组件通信方案概述在 Vue 中模块间的通信很普遍如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
Vue 非父子组件通信
前面的话在实际业务中,除了父子通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件.Vue.js 2.x中,使用一个空的Vue实例作为中央事件总线(bus). 中央事件总 ...
Vue非父子组件通信的几种方式
文章目录 1.provide和inject 1.1基本使用 1.2如何处理响应式数据 2.全局事件总线mitt库 2.1安装mitt库,封装eventbus.js工具类 2.2在其中一个组件中触发事件 ...
[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...

VUE非父子组件通信Bus——公交车踩坑笔记

VUE非父子组件通信Bus——公交车踩坑笔记相关推荐

最新文章

热门文章