Vue元件間的通訊

沐風發表於2017-09-23
Vue元件

1.父元件到子元件通訊

通過props屬性來傳遞

/*------HTML-----*/
<div id="app">
    <Parent></Parent>
</div>

/*------javascript----- */
//註冊全域性元件（子元件）
Vue.component(`Child`,{
    template:`<div>我是子元件,看後面->{{message}}</div>`,
    props:[`message`],  //註冊子元件的props自定義屬性，並且繫結到元件內
});
// 註冊全域性元件（父元件)
Vue.component(`Parent`,{
    template:`<div>
        我是父元件
        <Child :message="ParentMessage"></Child>  
        //通過message這個props自定義屬性將值傳入子元件
    </div>`,
    data:function(){
        return {
            ParentMessage:`我是父元件傳過來的訊息`
        }
    },
});
var app = new Vue({
    el:`#app`,
});

2.子元件到父元件通訊

通過Vue.$emit()方法

/*------HTML-----*/
<div id="app1">
    <Parent1></Parent1>
</div>
/*------javascript----- */
// 註冊全域性元件（子）
Vue.component(`Child1`,{
    template:`<div @click="call">我是子元件，點選我父元件的字會變色</div>`,
    methods:{
        call:function(){
            this.$emit(`change`,`#f00`);  
            //通過$emit()將事件觸發介面暴露出去,引數二是要傳遞出去的引數
        }
    },
})

// 註冊全域性元件（父）
Vue.component(`Parent1`,{
    template:`<div>
        <span :style="style">我是父元件</span>
        <Child1 @change="changeColor"></Child1> 
    </div>`,
    //通過監聽change事件來觸父元件中的changeColor事件，從而實現子到父的通訊
    data:function(){
        return{
            style:{
                color:`#000`,
            }
        }
    },
    methods:{
        changeColor:function(red){ //接子元件傳過來的引數
            this.style = {
                color:red,
            }
        }
    },
});

//掛載節點
var app1 = new Vue({
    el:`#app1`,
});

3.同級元件間的通訊

/*------HTML-----*/
<div id="app2">
    <Child2 @change1="change2"></Child2>
    <!-- 3.在掛載節點監聽change1事件，觸發change2事件 -->
    <Child3 :change3="change3"></Child3>
    <!-- 5.通過change3這個props中定義的自定義屬性將，值傳入Child3元件中 -->
</div>
/*------javascript----- */
Vue.component(`Child2`,{
    template:`<div @click="change">我是兄弟元件2</div>`,
    //1.繫結change事件到click事件上
    methods:{
        change:function(){
            this.$emit(`change1`);
            //2.暴露介面出去，到外部呼叫
        }
    },
});

Vue.component(`Child3`,{
    // 6.值傳到這裡改變了child3的樣式，變為紅色，實現了兄弟元件間的通訊
    template:`<div :style="{color:change3}">我是兄弟元件3</div>`,
    props:[`change3`],
});

// 掛載節點
var app2 = new Vue({
    el:`#app2`,
    data(){
        return{
            change3:`#000`,
        }
    },
    methods:{
        change2:function(){
            this.change3 = `#f00`
            // 4.修改掛載節點下的change3的值
        }
    },
})

相關文章