vue中$emit與$on

風靈使發表於2018-12-08
VueMIT

var Event = new Vue(); 相當於又new了一個vue例項，Event中含有vue的全部方法；

Event.$emit('msg',this.msg); 傳送資料，第一個引數是傳送資料的名稱，接收時還用這個名字接收，第二個引數是這個資料現在的位置；

Event.$on('msg',function(msg){　　

//接收資料，第一個引數是資料的名字，與傳送時的名字對應，第二個引數是一個方法，要對資料的操作
//這裡是對資料的操作

})

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue2.0.3.js" ></script>
        <script type="text/javascript">
            //準備一個空的例項物件
            var Event = new Vue();
            var A={
                template:`
                    <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
                        <h4>A元件</h4>
                        <p>{{a}}</p>
                        <input type="button" value="把A資料給C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        a:'我是A裡面的資料'
                    }
                },
                methods:{
                    send(){        //A傳送資料
                        Event.$emit('a-msg',this.a);
                    }
                }
            };
            var B={
                template:`
                    <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
                        <h4>B元件</h4>
                        <p>{{b}}</p>
                        <input type="button" value="把B資料給C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        b:'我是B裡面的資料'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:`
                    <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
                        <h4>我是C元件,我在坐等接收資料</h4>
                        <p>{{a}}</p>
                        <p>{{b}}</p>
                    </div>
                `,
                data(){
                    return{
                        a:'',
                        b:''
                    }
                },
                mounted(){        //兩種接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        
                    },
                    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>
</html>

效果圖：
在這裡插入圖片描述

相關文章