美文网首页vue
vue兄弟组件间的通信

vue兄弟组件间的通信

作者: 寒梁沐月 | 来源:发表于2017-04-16 13:16 被阅读226次

    1.vuex
    2.自定义公共事件管理通信

        <script src="vue.js"></script>
        <script>
            //准备一个空的实例对象
            var Event=new Vue();
            var A={
                template:`
                    <div>
                        <span>我是A组件</span> -> {{a}}
                        <input type="button" value="把A数据给C" @click="send">
                    </div>
                `,
                methods:{
                    send(){
                        Event.$emit('a-msg',this.a);
                    }
                },
                data(){
                    return {
                        a:'我是a数据'
                    }
                }
            };
            var B={
                template:`
                    <div>
                        <span>我是B组件</span> -> {{a}}
                        <input type="button" value="把B数据给C" @click="send">
                    </div>
                `,
                methods:{
                    send(){
                        Event.$emit('b-msg',this.a);
                    }
                },
                data(){
                    return {
                        a:'我是b数据'
                    }
                }
            };
            var C={
                template:`
                    <div>
                        <h3>我是C组件</h3>
                        <span>接收过来的A的数据为: {{a}}</span>
                        <br>
                        <span>接收过来的B的数据为: {{b}}</span>
                    </div>
                `,
                data(){
                    return {
                        a:'',
                        b:''
                    }
                },
                mounted(){
                    //var _this=this;
                    //接收A组件的数据
                    Event.$on('a-msg',function(a){
                        this.a=a;
                    }.bind(this));
    
                    //接收B组件的数据
                    Event.$on('b-msg',function(a){
                        this.b=a;
                    }.bind(this));
                }
            };
    
    
            window.onload=function(){
                new Vue({
                    el:'#box',
                    components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>
    </body>
    
    

    相关文章

      网友评论

        本文标题:vue兄弟组件间的通信

        本文链接:https://www.haomeiwen.com/subject/eqjaattx.html