父子組件通信爬坑小記錄

wslongchen 發布于2019-08-26 10:38 / 2981人閱讀

摘要：的大小寫事件的名字沒有自動化的大小寫轉換，觸發的事件名必須和見提供的事件名完全匹配的情況下才能正常運行。父組件向子組件傳參時，無論何種命名方式，必須使用同一名字進行接收。

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

props的大小寫

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

parent.vue

childs2.vue

運行結果如下

當父組件中傳遞的變量為全駝峰式或者其他格式的時候，子組件只需要同名的變量便可進行數據接收。

各種數據類型的動靜態props

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

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

}
}
注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。

emit的大小寫

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

parent.vue

child.vue

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

雖然我們定義的函數名字為駝峰式的，但是不可以監聽到對應的短橫線命名的test-emit事件，必須使用testEmit來監聽。

總結

組件引用命名時，可以使用同名標簽，若為駝峰式命名的情況下，可以使用短橫線命名法。如：

子組件向父組件傳參時，如果使用短橫線命名法，則在props時需要使用響應的駝峰式進行接收，其他格式的命名則用同一名字進行接收。

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

云服務器 GPU云服務器父子組件通信父子組件父子組件通訊父子組件-動態渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106510.html

bilibili直播： Vue.js Podcast（小記錄）~~~

摘要：我聽不太懂了內存管理日后需要解決不應該合并小的請求升級成本可能會有多頁面構建工程歡迎社區人士來搞尤大說盡量少用會有副作用值得借鑒的啊勾股建議全局現階段停留在底層，不能完全解決，還是需要框架主持人：陰明 virtual dom 然后balabala（走神了- -）尤小右服務端渲染：流式渲染v-model用在自定義組件業務邏輯的組建需要可服用的需要注意父子組件的解耦（不推薦雙向綁定...

浠ラ箍 2019-08-19 18:18 評論0 收藏0
前端爬坑日記之vue內嵌iframe并跨域通信

摘要：由于該項目是基于原本的安卓，做的微信，所以原來的使用的頁面現在需要在中實現，那就是使用查看了很多很多文檔，其中這一篇是很有價值的下面將天的爬坑最終以問答的方式總結如下組件中如何引入如何獲取對象以及內的對象如何向內傳送信息內如何向外部發送信息由于該項目是基于原本的安卓app，做的微信h5，所以原來的使用webview的頁面現在需要在vue中實現，那就是使用iframe查看了很多很多文檔...

dreambei 2019-08-23 11:42 評論0 收藏0
前端--iframe爬坑記錄

摘要：且中沒有緩存這些消息。查閱了很多資料，后來發現這又是一坑。在沒有加載完成的情況下，消息自然是發不到的。解決辦法就是需要的事件寫到的事件中，代碼如下 1、iframe通信由于項目中有用到vue嵌入靜態頁面實現功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11... 但是在開發過程中還是遇到了一些問題，比如：ifra...

CntChen 2019-08-23 13:10 評論0 收藏0
前端--iframe爬坑記錄

摘要：且中沒有緩存這些消息。查閱了很多資料，后來發現這又是一坑。在沒有加載完成的情況下，消息自然是發不到的。解決辦法就是需要的事件寫到的事件中，代碼如下 1、iframe通信由于項目中有用到vue嵌入靜態頁面實現功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11... 但是在開發過程中還是遇到了一些問題，比如：ifra...

nanchen2251 2019-08-02 12:01 評論0 收藏0