6.Vue组件之间数据通信之 Bus总线

       基础组件之间传值，可以查看博主文章：1.Vue组件之间传值问题

       如果在项目中，组件与组件之间，并不是通过Vue.component('component-a',{...})这么简单来编写的。所以在使用父子间，兄弟间传值问题上，如何使用Bus总线来传值呢？

       项目中使用的组件是如下图所示样式

而不是下图这种的最基础写法。下图基础写法只用于初期学习

=======================================================================

在项目中，那么如何使用Bus总线来完成在父子、兄弟间的传值问题呢？

利用new来创建一个新的vue实例，可以轻松实现组件之间数据通信

 方法1 新创建一个Bus的js模块

// Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus

// 组件Com1
import Bus from './Bus'
export default {
     data() {
        return {
            val: 0
        }
    },
    methods: {
        changeVal(){
            this.val += 10;
            Bus.$emit('val', this.val)
        }
    },
}    

// 组件Com2
import Bus from './Bus'
export default {
    data() {
        return {
            val: 0
        }
    },
    mounted () {
        Bus.$on('val', data => {
            this.val = data;
        });    
   }    
} 

// 点击组件1，就可以改变组件2中的值。

方法2 创建一个$bus 原型

//Vue每个组件都是基于Vue原型的。所以创建一个$bus原型，就是给每个组件创建。每个组件都可以通过
//this.$bus 的方式访问
Vue.prototype.$bus = new Vue();

方法3 直接将Bus对象挂载到Vue根实例上 

import Vue from 'vue'
const Bus = new Vue()

const app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }
    router,
    store
});

// 组件中使用
this.$root.Bus.$on()
this.$root.Bus.$emit()

  方法2实例

仅以此来记录在学习Vue过程中，遇到的一些基础问题，简单笔记，供自己查看，也供初学者参考。

---

附：Vue篇目录：

    1.Vue组件之间传值问题                              2.v-model 用在组件中

    3.Vue.js 实战 调查问卷WebApp项目          4.vue-cli + webpack搭建Vue开发环境

    5. Vue简单问题汇总(持续更新...)                 6.Vue组件之间数据通信之Bus总线

    7.Vue-Router导航钩子(附Demo实例)         8.ES6箭头函数与普通函数的区别  

    9.Vuex的使用                                             10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

   11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

   12.Vuex命名空间namespaced                   13.Vue axios的使用      

---

---->如有疑问，请发表评论，或者联系博主：[email protected]，欢迎哦^_^