vue中props的詳解
看一下官方文件：
元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。
也就是props是子元件訪問父元件資料的唯一介面。
詳細一點解釋就是：
乙個元件可以直接在模板裡面渲染data裡面的資料(雙大括號)。
子元件不能直接在模板裡面渲染父元素的資料。
如果子元件想要引用父元素的資料，那麼就在prop裡面宣告乙個變數(比如a)，這個變數就可以引用父元素的資料。然後在模板裡渲染這個變數(前面的a)，這時候渲染出來的就是父元素裡面的資料。
1. 基本用法
圖1-props
var com1 = vue.component('child',}',
data: }'
3.單向資料流： props是單向繫結的
當父元件的屬性變化時，將傳導給子元件，但是反過來不會。
每次父元件更新時，子元件的所有 prop 都會更新為最新值。
不要在子元件內部改變 prop。如果你這麼做了，vue 會在控制台給出警告。
在兩種情況下，我們很容易忍不住想去修改 prop 中資料：
prop 作為初始值傳入後，子元件想把它當作區域性資料來用；
prop 作為原始資料傳入，由子元件處理成其它資料輸出。
對這兩種情況，正確的應對方式是：
定義乙個區域性變數，並用 prop 的值初始化它：
props: ['initialcounter'],
data: function ()
定義乙個計算屬性，處理 prop 的值並返回：
props: ['size'],
computed: } is } years old.
', props: ['object','school'],
data: function () } ',
props:['message']
靜態prop通過為子元件在父元件中的佔位符新增特性的方式來達到傳值的目的
var childnode = } ',
props:['message']
var parentnode = } ',
props:['mymessage']
var childnode = } ',
props:['my-message']
動態props
在模板中，要動態地繫結父元件的資料到子模板的 props，與繫結到任何普通的html特性相類似，就是用 v-bind。每當父元件的資料變化時，該變化也會傳導給子元件
var childnode = } ',
props:['mymessage']
var parentnode = }的型別是} ',
props:['mymessage'],
computed:
// 自定義驗證函式
propf: } ',
props:} ',
props:}
props:['childmsg']
var parentnode = }
components:
2、定義乙個計算屬性，處理 prop 的值並返回
props: ['size'],
computed: {
normalizedsize: function () {
return this.size.trim().tolowercase()
[注意]js中物件和陣列是引用型別，指向同乙個記憶體空間，如果 prop 是乙個物件或陣列，在子元件內部改變它會影響父元件的狀態
總結
props寫法 簡單理解vue中Props屬性
使用 props 傳遞資料 元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。prop 是元件資料的乙個字段，期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props vue.component child...
vue子元件props寫法
prop vue.js文件 camelcase 駝峰命名法 的 prop 名需要使用其等價的 kebab case 短橫線分隔命名 命名 props title likes ispublished commentids author props 帶有預設值的數字 propd 帶有預設值的物件 pro...
vue中的props物件
1.props物件的定義 props其實是properties的縮寫，props物件是用來定義屬性的。props物件可以接受陣列形式的引數又或者是物件形式的引數。陣列形式 props title likes ispublished commentids author 物件形式 在物件形式中，可以指定...