組件的屬性和事件
父子組件之間的通信
父子組件之間的通信就是 props down,events up，父組件通過 屬性props向下傳遞數據給子組件，子組件通過 事件events 給父組件發送消息。
比如，子組件需要某個數據，就在內部定義一個prop屬性，然后父組件就像給html元素指定特性值一樣，把自己的data屬性傳遞給子組件的這個屬性。
而當子組件內部發生了什么事情的時候，就通過自定義事件來把這個事情涉及到的數據暴露出來，供父組件處理。
<my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>
如上代碼，
- foo是
組件內部定義的一個prop屬性，baz是父組件的一個data屬性， - event-a是子組件定義的一個事件，doThis是父組件的一個方法
過程就是這樣：
- 父組件把baz數據通過prop傳遞給子組件的foo；
- 子組件內部得到foo的值，就可以進行相應的操作；
- 當子組件內部發生了一些變化，希望父組件能知道時，就利用代碼觸發event-a事件，把一些數據發送出去
- 父組件把這個事件處理器綁定為doThis方法，子組件發送的數據，就作為doThis方法的參數被傳進來
- 然后父組件就可以根據這些數據，進行相應的操作
屬性Props
Vue組件通過props屬性來聲明一個自己的屬性，然后父組件就可以往里面傳遞數據。
Vue.component('mycomponent',{
template: '<div>這是一個自定義組件,父組件傳給我的內容是：{{myMessage}}</div>',
props: ['myMessage'],
data () {
return {
message: 'hello world'
}
}
})
然后調用該組件
注意，由於HTML特性是不區分大小寫的，所以傳遞屬性值時，myMessage應該轉換成 kebab-case (短橫線隔開式)my-message="hello"。
<div id="app">
<mycomponent my-message="hello"></mycomponent>
</div>
v-bind綁定屬性值
v-bind綁定屬性值的一個特性：一般情況下，使用v-bind給元素特性(attribute)傳遞值時，Vue會將""中的內容當做一個表達式。
//比如
<div attr="message">hello</div>
上面這樣，div元素的attr特性值就是message。
<div v-bind:attr="message">hello</div>
這里的message應該是Vue實例的data的一個屬性，這樣div元素的attr特性值就是message這個屬性的值。
之所以說是一般情況，是因為class和style特性並不是這樣。用v-bind:class和class傳入正常的類名，效果是一樣的，因為對於這兩個特性，Vue采用了合並而不是替換的原則。
動態綁定特性值
根據上面，想要把父組件的屬性綁定到子組件，應該使用v-bind，這樣，父組件中數據改變時能反映到子組件。
注意，根據父組件傳遞給子組件的屬性類型的不同，當在子組件中更改這個屬性時，會有以下兩種情況：
- 當父組件傳遞的屬性是引用類型時，在子組件中更改相應的屬性會導致父組件相應屬性的更改。
<div id="app">
<div>這是父組件的parentArray：{{parentArray}}</div>
<my-component :child-array="parentArray"></my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>這是接收了父組件傳遞值的子組件的childArray: {{childArray}} <br>
<button type="button" @click="changeArray">
點擊我改變父元素的parentArray</button>
</div>`,
props: ['childArray'],
data () {
return {
counter: 1
}
},
methods: {
changeArray () {
this.childArray.push(this.counter++)
}
}
})
new Vue({
el: '#app',
data: {
parentArray: []
}
})
</script>
點擊結果
當父組件傳遞值為基本類型時，在子組件中更改這個屬性會報錯。正確的做法是，在父組件中綁定屬性值時，加上.sync修飾符。
<div id="app2">
<div>這是父組件的parentArray：{{parent}}</div>
<my-component-sync :child.sync="parent"></my-component-sync>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('myComponentSync', {
template: `<div>這是接收了父組件傳遞值的子組件的child: {{child}} <br>
<button type="button" @click="change">
點擊我改變父元素的parent</button>
</div>`,
props: ['child'],
data() {
return {
counter: this.child
}
},
methods: {
change() {
this.counter++
this.$emit('update:child', this.counter)
}
}
})
new Vue({
el: '#app2',
data: {
parent: 0
}
})
</script>
點擊結果如下圖，去掉無法改變
子組件希望對傳入的prop進行操作
一般來說，是不建議在子組件中對父組件中傳遞來的屬性進行操作的。如果真的有這種需求,可以這樣:
- 父組件傳遞了一個基本類型值，那么可以在子組件中創建一個新的屬性，並以傳遞進來的值進行初始化，之后就可以操作這個新的屬性了
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
- 父組件傳遞了一個引用類型值，為了避免更改父組件中相應的數據，最好是對引用類型進行復制。復雜的情況，肯定應該是深復制。
給子組件傳遞正確類型的值
同樣是上面的原因，靜態的給子組件的特性傳遞值，它都會把他當做一個字符串。
<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>
子組件中，特性的值是字符串 "1" 而不是 number 1。如果想傳遞正確的數值，應該使用v-bind傳遞，這樣就能把傳遞的值當做一個表達式來處理，而不是字符串。
<!-- 傳遞實際的 number 1 -->
<comp v-bind:some-prop="1"></comp>
Prop驗證
我們可以給組件的props屬性添加驗證，當傳入的數據不符合要求時，Vue會發出警告。
Vue.component('myComponent', {
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 也可以是一個自定義構造器函數，使用 instanceof 檢測。
// 自定義Person構造器
function Person(name, age) {
this.name = name
this.age = age
}
Vue.component('my-component', {
template: `<div>名字: {{ person-prop.name }}， 年齡： {{ person-prop.age }} </div>`,
props: {
person-prop: {
type: Person // 指定類型
}
}
})
new Vue({
el: '#app2',
data: {
person: 2 // 傳入Number類型會報錯
}
})
非Prop類型的屬性
也可以像在html標簽中添加data-開頭的自定義屬性一樣，給自定義組件添加任意的屬性。而不僅限於data-*形式，這樣做的話，Vue會把這個屬性放在自定義組件的根元素上。一個自定義組件的模板只能有一個根元素。
覆蓋非Prop屬性
如果父組件向子組件的非prop屬性傳遞了值，那么這個值會覆蓋子組件模板中的特性。
<div id="app3">
<my-component2 att="helloParent"></my-component2>
</div>
<script>
Vue.component('my-component2', {
template: `<div att="helloChild">子組件原有的特性被覆蓋了</div>`
})
new Vue({
el: '#app3'
})
</script>
上面渲染的結果是，div的att屬性是helloParent。
注意：前面已經提到過，覆蓋原則對於class和style不適用,而是采用了合並(merge)的原則。
<div id="app3">
<my-component2 att="helloParent" class="class2" style="color: red;"></my-component2>
</div>
<script>
Vue.component('my-component2', {
template: `<div att="helloChild" class="class1" style="background: yellow;">子組件原有的特性被覆蓋了</div>`
})
new Vue({
el: '#app3'
})
</script>
上面的渲染結果是，div的類名是class1 class2，行內樣式是color:red; background:yellow;。