vue 組件1
阿新 • • 發佈：2017-08-18
更新 自定義 arr 通信 初學者 字面量語法 應對 綁定 結果
註意：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