vue中非父子组件的传值bus的使用

非父子之间的组件传值，可以使用vuex。简单的状态管理，也可以用vue bus

vue bus可以实现不同组件间、不同页面间的通信，比如我在A页面出发点击事件，要B页面发生变化，使用方法如下：

全局定义：main.js

window.eventBus = new Vue()

 

在A页面的事件中触发：

eventBus.$emit('todo', '123')

 

在B页面的created中开始监听，越早监听越好：

eventBus.$on('todo', (params) => {

         console.log(params)

})

 下面我来一个例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值（bus/总线/发布订阅模式/观察者模式）</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>
    Vue.prototype.bus = new Vue();

    Vue.component('child',{
        data:function(){
            return {
                selfContent:this.content
            }
        },
        props:{
            content:String
        },
        template:'<div @click="handleClick">{{selfContent}}</div>',
        methods:{
            handleClick:function(){
                //由于bus是vue的一个实例，所以它有$emit这个方法,change就是一个随意的名字，可以改成aaa
                this.bus.$emit('change',this.selfContent)
            }
        },
        mounted:function(){
            var this_= this;
            this.bus.$on("change",function(msg){
                this_.selfContent=msg;
            })
        }
    })
    var vm= new Vue({
        el:'#app',
        data:{},
        methods:{
        },

    })
    </script>
</body>
</html>

当然也可以参考一些其他人的博客，注意理解

https://www.jianshu.com/p/5b383e66c117

http://www.cnblogs.com/fanlinqiang/p/7756566.html