vue 組件1

注意：vue組件中的data必須爲一個函數，要不vue就會中止工做。

構成組件

組件意味着協同工做，一般父子組件會是這樣的關係：組件A在它的模板中使用了組件B，他們之間必然須要相互通訊：父組件須要給子組件傳遞數據，子組件須要將它內部的發生的事情告訴父組件。然而，在一個良好定義的接口中儘量將父子組件解耦是很重要的。這保證了每一個組件在相對隔離的環境中書寫和理解，也大幅提升了組件的可維護性和可重用性。

 

在vue中，父子組件的關係能夠總結爲props down和events up;父組件經過props向下傳遞數據給子組件。子組件經過events給父組件發送消息。

prop

使用prop傳遞數據

組件實例的做用域是孤立的。這意味着不能（也不該該）在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件中的數據。咱們須要使用子組件的props選項。

子組件要顯式地用props選項聲明它要得到的數據。

Vue.component( 'child', {

// 聲明 props

props: [ 'message'],

// 就像 data 同樣，prop 能夠用在模板內

// 一樣也能夠在 vm 實例中像「this.message」這樣使用

template: '<span>{{ message }}</span>'

})

而後咱們能夠這樣向它傳入一個普通字符串：

<child message="hello!"></child>

結果：hello!

camelCase vs. kebab-case

 html特性是不區分大小寫的。因此當使用的不是字符串模板時，camelCased（駝峯式）命名的prop須要轉換爲相對應的kebab-case(短橫線隔開式)命名：

Vue.component( 'child', {

// camelCase in JavaScript

props: [ 'myMessage'],

template: '<span>{{ myMessage }}</span>'

})

 

<!-- kebab-case in HTML -->

<child my-message="hello!"></child>

動態prop

在模板中，要動態的綁定父組件的數據到子模板的props,與綁定到任何普通的html特性相相似，就是用v-bind，每當父組件的數據發生變化時，該變化也會傳導給子組件。

<div>

<input v-model="parentMsg">

<br>

<child v-bind:my-message="parentMsg"></child>

</div>

使用 v-bind 的縮寫語法一般更簡單：

<child :my-message="parentMsg"></child>

 

字面量語法vs動態語法

初學者常犯的錯誤是使用字面量語法傳遞數值。

<!-- 傳遞了一個字符串 "1" -->

<comp some-prop="1"></comp>

由於它是一個字面prop,它的值是字符串「1」，而不是number.若是想傳遞一個實際的number，須要使用v-bind,從而讓它的值被看成javascript表達式計算：

<!-- 傳遞實際的 number -->

<comp v-bind:some-prop="1"></comp>

單向數據流

prop是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但不會反過來。這是爲了防止子組件無心修改了父組件的狀態--這會讓應用的數據流很難理解。

另外，每次父組件更新時，子組件的全部prop都會更新爲最新值。這意味着你不該該在子組件內部改變prop。若是你這麼作了，vue會在控制檯報出警告。

爲何咱們會有修改prop的衝動，一般有兩個緣由：

1，prop做爲初始值傳入後，子組件想把它當作局部數據來用，

2，prop做爲初始值傳入，由子組件處理成其餘數據輸出。

對這兩種緣由，正確的應對方式是：

1，定義一個局部變量，並用prop的值初始化它。

props: [ 'initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

2，定義一個計算屬性，處理prop的值並返回。

props: [ 'size'],

computed: {

normalizedSize: function () {

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

}

}

注意在javascript中對象和數組是引用類型，指向同一個內存空間，若是prop是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

prop驗證

咱們能夠爲組建的props指定驗證規格。若是傳入的數據不符合規格，vue會發出警告。當組件給其餘人使用時，這頗有用。

要指定驗證規格，咱們須要用對象的形式，而不能用字符串數組：

Vue.component( 'example', {

props: {

// 基礎類型檢測 (`null` 意思是任何類型均可以)

propA: Number,

// 多種類型

propB: [ String, Number],

// 必傳且是字符串

propC: {

type: String,

required: true

},

// 數字，有默認值

propD: {

type: Number,

default: 100

},

// 數組/對象的默認值應當由一個工廠函數返回

propE: {

type: Object,

default: function () {

return { message: 'hello' }

}

},

// 自定義驗證函數

propF: {

validator: function (value) {

return value > 10

}

}

}

})

type 能夠是下面原生構造器：

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol 象徵

type也能夠是一個自定義的構造器函數，使用instance of檢測。

當prop驗證失敗，vue 會拋出警告（若是使用的是開發版本）.注意props會在組件實例建立以前進項校驗，因此在default或validator函數裏。諸如data,computed,或methods等實例屬性還沒法使用。