Vue學習筆記之通過props往子元件通訊

2021-10-09 14:18:11 字數 527 閱讀 5074

今天學到元件通訊的方法中的通過props往子元件傳值,記錄一下入門vue遇到的小問題,props相當於乙個自定義的屬性,並且這個屬性可以用來接收你父元件中的資料,像是乙個通道。當你想往子元件傳值時,可以使用v-bind來繫結這個自定義的屬性。

第一步:在父元件模板中使用子元件時,使用v-bind繫結props中自定義的屬性childdata,於是msg便能通過props中自定義的屬性childdata傳到子元件中,在子元件中,自定義屬性childdata便可以作為接收的資料使用。

vue.component('parent',

},template:`

我是父元件

` });

第二步:在子元件中使用props接收父元件傳遞的資料

vue.component('child',);
執行效果如下:

ReactJS筆記之props 四

專案應用中經常需要在使用乙個元件的時候傳遞引數,這個時候可以把引數放在標籤的屬性當中,所有的屬性都會作為 props 物件的鍵值。例如 class index extends component 這個時候 intext 和 outtext 兩個引數封裝到乙個叫 str 的物件引數內,然後傳到maxb...

Vue之元件(Props特性深析)

1 prop 的命名風格 前言 案例 要求所傳引數數值必須在18 50之間 validator為函式格式,且接收引數value即為props傳值大小,返回值為自定義校驗限制範圍 分類型別 基礎資料型別type校驗 多條件資料型別type校驗 必填項required校驗 預設值default校驗 自定...

VUE元件學習 props資料傳遞

最近用到了vue中父元件和子元件之間通訊的相關知識,正好看書看到vue元件這一章,在此記錄一下 vue元件可以理解為預先定義好行為的viewmodel類。乙個元件可以預定義很多選項,但是最核心的還是一下幾個 1 模板 template 模板生命了資料和最終展示給使用者的dom之間的對映關係 2 初始...