vue2.0 父子組件通信 兄弟組件通信

父組件是通過props屬性給子組件通信的來看下代碼：

父組件：

<parent>
    <child :child-com="content"></child> //注意這里用駝峰寫法哦
</parent>

data(){
    return {
        content:'sichaoyun'
    };
}

子組件通過props來接受數據

第一種方法

props: ['childCom']

第二種方法

props: {
    childCom: String //這里指定了字符串類型，如果類型不一致會警告的哦
}

第三種方法

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

---

子組件與父組件通信

vue2.0只允許單向數據傳遞，我們通過出發事件來改變組件的數據，廢話少說，上干貨

子組件代碼

<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox','the msg'); //觸發showbox方法，'the msg'為向父組件傳遞的數據
    }
}

父組件

<child @showbox="toshow" :msg="msg"></child> //監聽子組件觸發的showbox事件,然后調用toshow方法

methods: {
    toshow(msg) {
        this.msg = msg;
    }
}

---

兄弟組件之間的通信

我們可以實例化一個vue實例，相當於一個第三方

let vm = new Vue(); //創建一個新實例

組件他哥

<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('blur','sichaoyun'); //觸發事件
    }
}

組件小弟接受大哥命令

<div></div>
created() {
  vm.$on('blur', (arg) => { 
        this.test= arg; // 接收
    });
}

搞定！