7.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根实例上 

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过程中，遇到的一些基础问题，简单笔记，供自己查看，也供初学者参考。

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