父子組件通信爬坑小記錄

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.父組件向子組件傳參時，無論何種命名方式，必須使用同一名字進行接收。