vue父子組件通訊

// 1：父組件傳值給子組件

// 父組件：
<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] //這樣能夠指定默認的值
    }
}

//2：子組件與父組件通訊

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

methods: {
    testClick() {
        this.$emit('test','123'); //$emit（even,value）even 
　　　　　//是一個函數，value 是傳給父組件的值，觸發名爲test方法， '123'爲向父組件傳遞的數據
    }
}

// 父組件接收:  

<div>
    <child @test="change" :msg="msg"></child>  //監聽子組件觸發的test事件,而後調用change方法
</div>
methods: {
    change(val) {
        this.msg = val;  // val: 123
    }
}

// 3:父組件向子組件傳字符串的特殊狀況

<div>
　　<child value="str"></child>
</div>
//該種方法「只能傳遞字符串」，將child的data中的value = "str";不須要父組件data中有數據

Vue.component("child", {
　　props:["value"],
　　template: '<span>{{ value }}</span>'});