Vue的props是用于父組件向子組件傳遞數據的,它的定義方式和普通的屬性一樣,但是需要通過子組件的props選項來聲明接收,props可以是基本類型、對象或數組。
在開發中,props的值可能會發生變化,這時候我們需要監聽props的變化來執行相應的邏輯。Vue提供了watch選項來監聽props的變化。
Vue.component('child', { props: { message: String }, watch: { message: function(newVal, oldVal) { console.log('props message changed from ' + oldVal + ' to ' + newVal); } } })
在上述代碼中,我們定義了一個子組件,并監聽了message這個props的變化,當message的值發生變化時,watch選項會觸發函數,并將新值和舊值作為參數傳入。
除了直接在組件中監聽props,我們還可以通過計算屬性來監聽props。
Vue.component('child', { props: { message: String }, computed: { reversedMessage: function() { return this.message.split('').reverse().join(''); } } })
在上述代碼中,我們定義了一個計算屬性reversedMessage,它依賴于message這個props。當message的值發生變化時,計算屬性reversedMessage也會相應地更新。
上一篇背景顏色設置 css
下一篇css偽類兼容ie