VUE元件學習 props資料傳遞

最近用到了vue中父元件和子元件之間通訊的相關知識，正好看書看到vue元件這一章，在此記錄一下

vue元件可以理解為預先定義好行為的viewmodel類。乙個元件可以預定義很多選項，但是最核心的還是一下幾個：

1）模板（template）-----模板生命了資料和最終展示給使用者的dom之間的對映關係

2）初始資料（data）-----乙個元件的初始資料狀態。對於可復用的元件來說，通常是私有的狀態

3）接受的外部引數（props）-----元件之間通過引數來進行資料的傳遞和共享。引數預設是單向繫結（由上至下），但也可以顯式的宣告為雙向繫結

4）方法（methods）對資料的改動操作一般都在元件的方法內進行。可以用過v-on指令將使用者輸入時間和元件方法進行繫結

5）生命週期鉤子函式（lifecycle hooks）-----乙個元件會除法多個生命週期的鉤子函式。比如created、attached、destroyed等，在這些鉤子函式中，我們可以封裝一些自定義的邏輯。和傳統的mvc相比，這些可以理解為controller的邏輯被分散到了這些鉤子函式中

看過了，先不寫了

總的來說，vue有三種資料傳遞方式：

props

元件通訊

slot

props是元件資料的乙個字段，期望從父元件中傳下來的資料。

因為元件例項的作用域是孤立的，這意味著不能也不應該在子元件的模板內直接引用父元件的資料，所以子元件需要顯式的用props選項來獲取父元件的資料

props可以是字面量，也可以是表示式，還可以繫結修飾符

（1）字面量語法

**如下（示例）：

vue.
component
('child'
,},ddfe!'
})

向它傳入乙個普通字串

msg"hello"
>
child
>

html特性不區分大小寫。名字形式為駝峰式的props用作特性時，需要轉換為短橫線(kebab-case)形式

**如下（示例）：

vue.extend(} ddfe! div
>
', replace:true //replace決定是都替換自定義元素
})my-component
="hello!"
>
child
>

(2) 動態語法

類似於用v-bind將html特性繫結到乙個表示式，我們也可以用v-bind將動態props繫結到父元件的資料。每當父元件的資料變化時，該變化也會傳導給子元件

**如下（示例）：

//定義子元件
var child = vue.
extend(} 
',//子元件模板
replace:
true}}
//定義父元件
var parent = vue.
extend
(//hello變數的初始化資料},
//引入子元件
components:})
//建立根例項
newvue(}
)

(3) 繫結修飾符

props預設是單向繫結

當父元件屬性變化時，會傳導給子元件，但是反過來不會

可以使用修飾符顯式的宣告單次繫結還是雙向繫結

sync，雙向繫結

once，單次繫結

**如下（示例）：


:msg
="parentmsg"
>
child
>
:msg.sync
="parentmsg"
>
child
>
:msg.once
="parentmsg"
>
child
>

雙向繫結會把子元件的msg屬性同步到父元件的parentmsg屬性；

單次繫結在建立之後不會同步之後的變化；

如果props是乙個物件或者陣列，那麼它是按引用傳遞的，在子元件中修改它會影響父元件的狀態，而不管使用哪種繫結型別。

**如下（示例）：

"example"
>
type
="text"
v-model
="info.name"
/>
v-bind:msg.once
="info"
>
child
>
body
>
>
//建立根例項
newvue(}
},component:
} ddfamily! '}
}})script
>

（4）prop驗證

元件可以為props指定驗證要求。當元件給其他人使用時，可以確保其他人正確的使用元件，此時prop的值是乙個物件。

**如下（示例）：

vue.component('example',,
//數字，有預設值
propd:,
//物件/陣列的預設值應當有乙個函式返回
prope:}},
//指定這個prop為雙向繫結
//如果繫結型別不對，將丟擲一條警告
propf:,
//自定義驗證函式
propg:
} }})

type可以是以下原生構造器：

（5）prop轉換函式

給prop定義乙個coerce函式（vue.js 1.0.12新增）——每當prop在父類更新的時候，prop的值將會通過coerce函式，可以將它理解為prop的單向過濾器，只是它被定義在子元件內。

**如下（示例）：

vue.component('example',
},proph:
} }})

（6）props&propdata&data

props，作用於父子元件之間的資料傳遞

data，作為組建的私有資料存在

propdata，常用來在元件初始化之後覆蓋props中的屬性

VUE元件學習 props資料傳遞

VUE （9）元件 props資料傳遞

VUE （9）元件 props資料傳遞

Vue 元件驗證props

VUE元件學習 props資料傳遞

VUE （9）元件 props資料傳遞

VUE （9）元件 props資料傳遞

Vue 元件 驗證props

相關推薦

Vue 元件驗證props