父子組件通訊爬坑小記錄

kebab-case：短橫線命名法，多個單詞之間使用短橫線「-」進行鏈接，單詞所有小寫。如：first-name,user-info,create-order。
camelCased：駝峯命名法，第一個單詞小寫，從第二個單詞開始首字母大寫。如：fistName,userInfo,createOrder。
PascalCased：帕斯卡命名法，單字之間不能使用空格、「_」和「-」進行鏈接，命名中全部的單詞必須首字母大寫。如FirstName、UserInfo、CreateOrder。

props的大小寫

父組件在傳值的時候可子組件以將變量從短橫線式轉換爲駝峯式，因此在傳遞參數的時候父組件使用短橫線式時，子組件應該將其轉換爲駝峯式進行接收

parent.vue

<Childs2 my-first="msg"></Childs2>

childs2.vue

<template>
    <div>
        Childs2
        {{myFirst}}
    </div>
</template>
<script>
export default {
    name:'Childs2',
    props:["myFirst"],
}
</script>

運行結果以下

當父組件中傳遞的變量爲全駝峯式或者其餘格式的時候，子組件只須要同名的變量即可進行數據接收。

各類數據類型的動靜態props

props: ['size'],
computed: {
normalizedSize: function () {

return this.size.trim().toLowerCase()

}
}
注意在 JavaScript 中對象和數組是經過引用傳入的，因此對於一個數組或對象類型的 prop 來講，在子組件中改變這個對象或數組自己將會影響到父組件的狀態。

emit的大小寫

事件的名字沒有自動化的大小寫轉換，觸發的事件名必須和見提供的事件名徹底匹配的狀況下才能正常運行。

parent.vue

<templete>
    <Childs2 @testEmit="hello"> </Childs2>
</templete>
<script>
    export default {
        methods: {
            hello() {
                alert('hello');
            }
        }
    }
</script>

child.vue

methods: {
    sayHi(){
        this.$emit("testEmit");
}

雖然咱們定義的函數名字爲駝峯式的，可是不能夠監聽到對應的短橫線命名的test-emit事件，必須使用testEmit來監聽。

總結

1. 組件引用命名時，可使用同名標籤，若爲駝峯式命名的狀況下，可使用短橫線命名法。如：

<template>
<div>
  <childs-test MyFirst="msg"></childs-test>
    <childsTest MyFirst="msg"></childsTest>
    <!-- 兩種方式都可正確引用 -->
</div>
</template>
<script>
import childsTest from './Childs2'
export default {
    components:{
        childsTest,
    },
  }
</script>

1. 子組件向父組件傳參時，若是使用短橫線命名法，則在props時須要使用響應的駝峯式進行接收，其餘格式的命名則用同一名字進行接收。

3.父組件向子組件傳參時，不管何種命名方式，必須使用同一名字進行接收。