vue2.0父子組件以及非父子組件如何通訊

1.父組件傳遞數據給子組件

父組件數據如何傳遞給子組件呢？能夠經過props屬性來實現

父組件：

<parent>
    <child :child-msg="msg"></child>//這裏必需要用 - 代替駝峯
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子組件經過props來接收數據: 
方式1：

props: ['childMsg']

方式2 :

props: {
    childMsg: Array //這樣能夠指定傳入的類型，若是類型不對，會警告
}

方式3：

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //這樣能夠指定默認的值
    }
}

這樣呢，就實現了父組件向子組件傳遞數據.

具體子組件方法

<template>
  <div>
    子組件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父組件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

 

2.子組件與父組件通訊

那麼，若是子組件想要改變數據呢？這在vue中是不容許的，由於vue只容許單向數據傳遞，這時候咱們能夠經過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的.

子組件:
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup',{
　　　　　　　type: id,
　　　　　　　brand: itemT.PARENT_ID,
　　　　　　　model: itemT.DICTIONARIES_ID

　　　　　　}); //主動觸發upup方法，'hehe'爲向父組件傳遞的數據

 } }

父組件:

<div>
    <child @upup="change"></child> //監聽子組件觸發的upup事件,而後調用change方法 直接在這裏打印數據就能夠了
</div>
methods: {
    change(date) {
        this.date = date;
    }
}

3.非父子組件通訊

若是2個組件不是父子組件那麼如何通訊呢？這時能夠經過eventHub來實現通訊. 
所謂eventHub就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件.

let Hub = new Vue(); //建立事件中心

組件1觸發：

<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','hehe'); //Hub觸發事件
    }
}

組件2接收:

<div></div>
created() {
    Hub.$on('change', () => { //Hub接收事件
        this.msg = 'hehe';
    });
}

這樣就實現了非父子組件之間的通訊了.原理就是把Hub看成一箇中轉站！

 

 

父組件於子組件通訊解決了，可是若是子組件要有操做：

父組件

 <!-- 
            model
            定義一個 方法事件 close 調用 closeModel 這個函數
　　　　　　　　定義一個 sure 方法，在此次的組件調用中，執行 gotoCart 函數，執行什麼，方法中寫,sure方法具體在子組件中哪裏調用，就看@click寫字組件的哪裏。
model組件能夠被屢次調用在一個頁面的，假如又有一個地方調用了這個組件，此次 確認叫作，查看購物車，那麼這裏就是要執行跳轉了，sure 這個方法不變，仍是定義sure方法，由於
這個方法，在組建中創建了，這裏吧sure方法對贏執行的函數，從新一個就行，至關於 sure 方法只是一個 父子組件 的中間商，起到通訊的做用，真正起做用的是這個方法
對應的函數
例如  加入購物車失敗


注意：子組件 父組件 綁定對應的函數必須在最外層，子組件的確認按鈕執行函數，再確認按鈕上，在父組件中沒有確認按鈕的，父組件只是一個插槽
         --> 
        <Model v-bind:mdShow="mdShow" v-on:close="closeModel" v-on:sure="gotoCart">
            <span slot="message">加入購物車成功</span>
            <span slot="leftMessage">取消</span>
            <span slot="rightMessage">確認</span>
        </Model>

<!-- 加入購物車失敗 -->
<Model v-bind:mdShow="mdShowFail" v-on:close="closeModel" v-on:sure="chenkCart">
　　<span slot="message">{{messageNew}}</span>
　　<span slot="leftMessage">取消</span>
　　<span slot="rightMessage">查看購物車</span>
</Model>

closeModel() {
　　this.mdShow = false; // 執行要執行的
}

gotoCart(){

}
chenkCart(){

}

子組件

<template>
    <div class="model_container" v-show="mdShow == true"  @click="closeModel">
        <div class="model_wrap">
            <div class="text">
                <slot name="message"></slot>

            </div>
            <!-- <p>{{mdShow}}</p> -->
            <div class="bottom">
                <Button class="right_bd" @click="closeModel">
                    <slot name="leftMessage"></slot>
                </Button>
                <Button type="primary" @click="sureModel">
                    <slot name="rightMessage"></slot>
                </Button>
            </div>
        </div>
    </div>
</template>

methods: {
        closeModel() {
            // 調用父組件的 close 方法
            this.$emit("close");
        },

　　　　　　　　// 調用父組件的 sure 方法

　　　　　　sureModel(){
　　　　　　　　this.$emit("sure");
　　　　　　}

    }

就是性當與是，子組件通知父組件 我操做了，你在父組件該執行你要執行的了