vue的一個重要特徵就是組件化開發。那麼如何實現組件之間的消息傳遞就顯得尤爲重要。vue給出了以下幾種方式：
- 利用props實現父組件向子組件傳遞信息
- 子組件內利用$emit方法觸發父組件的一個事件，同時可以傳入參數實現子組件向父組件的數據傳遞。
下邊以一個具體的例子做詳細說明，這個例子中父組件利用props向子組件傳遞一個字符串，同時子組件設置相應的按鈕，點擊按鈕實現子組件向父組件傳遞一個數據，以此改變父組件的fontSize值。具體代碼如下：
<body>
<div id="app1" :style="{ fontSize: size + 'px' }">
<demo-props :message='message' @enlarge-text='enlargeText'></demo-props>
</div>
<script>
Vue.component('demo-props', {
props: ['message'],
template: `
<div>
<button @click="$emit('enlarge-text',2)">2倍放大</button>
<button @click="$emit('enlarge-text',4)">4倍放大</button>
<p>{{message}}</p>
</div>`
})
var app1 = new Vue({
el: "#app1",
data: {
size: 10,
message: 'Hello world'
},
methods: {
enlargeText: function (scale) {
this.size = this.size * scale;
}
}
})
</script>
</body>以上代碼有幾點需要具體說明：
- 註冊組件時，template後邊不是單引號，而是鍵盤上數字鍵1左邊的那個符號。
- 點擊子組件的button，會執行$emit函數，該函數的第一個參數是在父級組件監聽的事件名稱，後邊的參數都是子組件需要向父組件傳遞的數據。
- 註冊組件時，props是一個數組，需要從父組件傳遞值的屬性，都應該放在該數組內。當然vue也提供了一種方式讓我們對props中的值做一些簡單驗證。此時props變成一個對象而不是一個存放字符串的數組。舉例如下：
Vue.component('my-component', {
props: {
propA: Number, //propA的值必須是Number類型的
propB: [Number, String], //propB的值必須是Number類型或者String類型
propC: { //propC的值是必須填寫的字符串類型的
type: String,
required: true
},
propD: { //propD的值是一個Number的，且默認值是100
type: Number,
default: 100
},
propE: { //propE的值是一個有默認值的對象
type: Object,
default: function () {
return { message: 'Hello world' }
}
},
propF: { //propF有自自定義的驗證方式，其值必須是'success', 'warning', 'danger'中的一個
validator: function (value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1;
}
}
}
})