vue父子組件之間的通訊

vue父子組件之間的通訊

• 1.父組件向子組件傳遞數據

//parent.vue
template:
<child :mdzz="msg"></child>
js:
data(){
    return{
        msg:'我是父組件數據',
    }
}

//child.vue
template:
    <p>
        {{ mdzz }}
    </p>
js:
    data(){
        return{
        }
    },
    //方式一
    props: ['mdzz'],
    //方式二
    props: {
        mdzz: String //這裏指定了字符串類型，若是類型不一致會警告
    },
    //方式三
    props: {
        mdzz: {
            type: String,
            default: '' 
        }
    },

vue-API : props說明
props 能夠是數組或對象，用於接收來自父組件的數據。props 能夠是簡單的數組，或者使用對象做爲替代，對象容許配置高級選項，如類型檢測、自定義校驗和設置默認值。

在子組件標籤裏定義mdzz屬性並賦值msg，這樣就傳遞到子組件了，子組件再經過props獲取父組件帶過來的數據，
能夠寫成對象屬性或者數組再用propsData傳遞給子組件，不須要像上面那樣寫，可是propsData僅限於new的實例使用，很蛋疼。

• 2.子組件向父組件傳遞數據
  子組件向父組件傳遞數據用$emit方法，

官網說明：觸發當前實例上的事件。附加參數都會傳給監聽器回調。
這個監聽器寫在父組件上，這樣，子組件傳遞數據的時候，父組件的監聽到，而後獲取傳過來的子組件的數據。

//parent.vue
template:
<child @showbox="toshow"></child>
js:
methods:{
    toshow(msg) {
       this.msg2 = msg;
    },
}
//child.vue
template:
<input @click="open" type="button" value="按鈕" />
js:
methods:{
    open() {
        this.$emit('showbox','我是子組件數據'); 
            //觸發showbox方法，'我是子組件數據'爲向父組件傳遞的數據
        }
}

首先觸發子組件實例上的事件，而後經過$emit()傳遞參數，監聽器和要傳遞的數據，監聽器爲綁定在父組件上的方法

參數：
    {string} event
    [...args]

參考API實例方法-事件

• 3.無直接關係組件之間的數據傳遞

let vm = new Vue(); //建立一個新實例
<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('blur','哈撒ki'); //觸發事件
    }
}

<div></div>
created() {
  vm.$on('blur', (msg) => { 
        this.data = msg; // 接收數據
    });
}

道理跟子組件向父組件傳遞數據是同樣的

以上言論如有不當或錯誤，歡迎指正~