vue 組件1
阿新 • • 發佈:2017-08-18
更新 自定義 arr 通信 初學者 字面量語法 應對 綁定 結果
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>
使用
註意: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(短橫線隔開式)命名:
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等實例屬性還無法使用。
vue 組件1