vue.js组件之间非父子传值：通过bus

传值的几种方式

1. 父子(向下)传值：通过属性
2. 子父（向上）传值：通过自定义事件
3. 非父子传值：通过bus.（非父子传值的其中一种方式）

非父子传值 通过bus

也被称为公共汽车
目的：通过子组件发布消息，使父级的订阅者收到

• 子组件发布的消息父级是接受不到的，就像纸质版的报纸，你发布总有个地区限制，比如 河南日报 只在河南发布一样，不会往其他地区流通一样，而 bus 就是将 河南日报提升一个等级，让它变成全国日报，在全国发行

此案例中用到了发布（$ emit）与订阅（$on）发布与订阅介绍

代码介绍展示：

/*-----------------------html-----------------------------*/

<div id="root">
    <My></My>
</div>

/*-----------------------js-----------------------------*/

    const bus = new Vue();  // 公共汽车
    						//通过new Vue()实例化出来一个对象
    new Vue({
        el:"#root",
        data:{
			age:13,
        },
        components:{
            My:{
                methods:{
                    fn(){
                        bus.$emit("my",2);   //现在 $emit 是在 bus 这个实例下了 *****
                    }
                },
                template:`
                    <div>My
                        <input type="button" @click="fn" value="发布">
                    </div>
                `
            }
        },
        mounted(){
            bus.$on("my",()=>{  //这个 $on 也是在 bus 这个实例下了，那么当发布者发布的时候，订阅者就能收到了
                console.log(1111111111);
            })
        }
    })

总结

我再新实例化出一个 Vue() 对象
将 $emit 和 $on 放在同一个实例化对象下面
这样无论当我的 $emit 和 $on 处在什么地方都能接受和发布了