您现在的位置是：首页 > 文章详情

vue兄弟组件通信（非vuex）

日期：2018-04-17点击：498收藏

实例：点击按钮将组件A的"A数据"传到组件B的方框内

image

实现思路：根据官方文档的教程->使用一个空的 Vue 实例作为事件总线

官方文档

代码展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script type="text/javascript" src="lib/vue.min.js" ></script>
        <title>组件通讯</title>
        <style>
            .b{
                width: 100px;
                height: 100px;
                border: 2px darkblue solid;
            }
            #app{
                margin: 0 auto;
                width: 100px;
                text-align: center;
                height: 600px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <mya></mya>
            <myb></myb>
        </div>
    </body>
    <template id="A"> 
        <div>
            <button @click="senddata">点击</button>
            <h1>{{a}}</h1>
        </div>
    </template>
    <template id="B"> 
        <div>
            <h1>{{b}}</h1>
            <div class="b">
                {{a}}
            </div>
        </div>
    </template>
    <script>
        var bus = new Vue();
        var vm=new Vue({
            el:"#app",
            components:{
                "mya":{
                    template:"#A",
                    data:function(){
                        return {
                            a:"A数据"
                        }
                    },
                    methods:{
                        senddata:function(){
                            bus.$emit("a-msg",this.a);
                        }
                    }
                },
                "myb":{
                    template:"#B",
                    data:function(){
                        return {
                            b:"B数据",
                            a:""
                        }
                    },
                    mounted:function(){
                        var bthis=this;
                        bus.$on("a-msg",function(a){
                            bthis.a=a;
                        });
                    }
                }
            }
            
        });
    </script>
</html>