Vue 使用 props 傳遞資料

元件不僅僅是要把模板內容進行復用，更重要的是元件間要通訊。 通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或引數，子元件接收到引數後，根據引數的不同來渲染不同的內容或執行操作。這個正向傳遞資料的過程就是要通過props來實現的。

在元件中，使用選項 props 來宣告需要從父級接受的資料，props 的值可以是兩種，一種是字串陣列，一種是物件。比如：

執行結果如圖：

props 中宣告的資料與元件 data 函式 return的資料主要區別就是props 來自父級，而data中的是元件自己的資料，作用域是元件本身，這兩種資料都可以在模板template 及 計算屬性 computed 和 methods 中使用。當傳遞的資料是來自父級的動態資料，可以使用v-bind 來動態繫結props 的值，當父元件的資料變化時，也會傳遞給子元件。上圖中 parentmessage就來自父元件的動態資料傳遞使用了v-bind(語法糖：parentmessage),注意當你傳遞的是數字、布林值、陣列、物件，如果不用v-bind ，傳遞的僅僅是字串!!!.。

另外補充一點：在使用過程中發現元件的template必須有且僅有乙個根節點，否則會報錯如下，做一下記錄，以免犯錯：

如上圖，此處必須要用乙個根節點包裹。

Vue使用props傳遞資料

元件不僅僅是用來進行內容的復用，更重要的是元件之間的要進行通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或引數，子元件接受到後根據引數額不同來渲染不同的內容或執行操作。這個正向傳遞的過程就是通過props來實現的。在元件中，使用選項props來宣告需要從父級接受的資料，props...

Vue2 0使用props傳遞資料 6

prop驗證 name age component元件 預設 msg 1 childmsg mytext show text msg null msg string msg number msg obj msg twoway msg validate msg number2string msg ob...

props 傳遞資料

props是元件的乙個屬性，它用於進行元件間通訊 在元件模版中使用props來宣告需要從父級接收的資料，props的值可以是物件或者陣列 元件傳遞的資料可以寫死，也可以是來自父元素的動態資料，如果父元素為動態資料，要用v bind動態繫結props的值，當父元件資料變化時，也會傳遞給子元件 v mo...