Vue入門 - 組件通信

1 父子組件構建順序

1. 先觸發子組件的mounted鉤子，再觸發父組件的mounted鉤子。

---

2 父組件向子組件傳遞數據(prop)

1. 在父組件的模版中對子組件標籤進行屬性綁定
   
   • <child message="hello"></child>
2. 在子組件中使用props屬性顯式地接收
   
   • props: ['message']，然後即可使用this.message使用。
3. 若需要動態綁定屬性，則需使用v-bind，或簡寫:message="hello"
4. 使用字面量語法child message="1"，此時綁定的是字符串”1”，若想綁定數值，需使用v-bind，讓它的值被當作js表達式計算。
5. props的值是單項流動的，並不會從子組件返回父組件。
6. 不應在子組件內改變props的值，若需要，則需在子組件內定義一個局部變量，並用prop初始化它，或使用計算屬性。

---

2.1 Prop驗證

1. 可以爲組件的props指定驗證規則，若傳入的數據不符合規則，vue會發出警告。
2. 要指定驗證規格，需要用對象的形式，而不能用字符串數組
3. 若prop驗證失敗，則在開發版本中拋出警告

//...
props: {
    propA: null,               //任何類型都可以
    propB: Number,             //數字類型
    propC: [String, Number]    //多種類型，字符串或數值都可
    propD: {                   //字符串類型，且必須傳。
        type: String,
        required: true
    },
    propE: {
        type: Number,          //數字類型，且有默認值
        default: 100
    },
    propF: {                   //數組/對象的默認值應由工廠函數返回。
        type: Object,
        default: function(){
            return { message: 'Hello' }
        }
    },
    propE: {                   //自定義驗證規則。
        validator: function(value){
            return value > 10 
        }
    }
}

type 可以是下面原生構造器：
1. String
2. Number
3. Boolean
4. Function
5. Object
6. Array
也可以是一個自定義構造器函數，使用 instanceof 檢測。

---

3 子組件向父組件傳遞數據(自定義事件)

1. 子組件通過自定義事件將數據傳遞給父組件。
2. 子組件中調用this.$emit('funcName',data)。
3. 父組件使用v-on監聽自定義事件<child @funcName='sayHello'></child>，子組件觸發this.$emit時會自動觸發。
4. 若想給某元素監聽原生事件，可使用.native修飾符。<child @click.native="sayHello"></child>

參考代碼：

//parent component
<template>
    <div v-on:childready="doSomthing">
</template>
<script>
//...
methods:{
    doSomthing:function(childVm){
        //...
    }
}
</script>

//child component
//...
    this.$emit('childready',this);
//...

---

4 使用自定義事件的表單輸入組件

1. 自定義事件可以用來創建自定義的表單輸入組件，使用 v-model 來進行數據雙向綁定。
   
   • <input v-model="something">
2. 要讓組件的 v-model 生效，它必須：
   
   • 接收一個 value 屬性props:['value']
   • 在有新的 value 時觸發 input 事件。this.$emit('input',data)

例子：

//parent
<child-form v-model="name"></child-form>

//child
<template>
  <input ref="input" :value="value" @input="updateValue">
</template>

<script>
export default {
    name: "form",
    props: ['value'],
    methods:{
        updateValue:function(){
            //獲取節點
            //var el = this.$refs.input;
            this.$emit('input', this.value);
        }
    }
}
</script>

---

5 非父子組件通信