vue 非父子组件通信

vue 非父子组件通信

两个不相关的实例通信  需要第三方实例来完成通信

下面试  app app2 两个不相关的实例

bus实例为通信实例

app app2 之间的通信 需要依靠bus 来完成

例子中app 的点击事件会触发bus 的'example'监听事件，bus 的监听事件会对app2的pn值进行操作

从而实现了在不影响app与app2 基础上从app 传递信息到app2 的操作

    <div id="app">
            <div @click="addn">{{pn}}</div>
        </div>
        <div id="app2">
            <div>{{ad}}</div>
        </div>
    </body>
    <script>

        var app=new Vue({
            el:"#app",
            data:{
                pn:10,
            },
            methods:{
                addn:function(value){
                     this.pn+=1;
                     console.log(value);
                      bus.$emit('example',2);
                    }
            }
        });
        var app2=new Vue({
            el:"#app2",
            data:{
                pn:10,
            },
            computed:{
                ad:function(){
                    return this.pn
                }
            },
            methods:{
            }
        });


        var bus=new Vue({

        } );
        bus.$on('example',function(value){
            app2.pn+=value
        })

    </script>