vue.js學習筆記(六)--利用v-model實現父子元件間的雙向通訊
阿新 • • 發佈:2018-11-06
在Vue中,我們可以使用prop屬性來進行父子元件間的通訊,在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。
但是prop 是單向繫結的,我們無法在元件中直接修改prop傳遞的屬性。
prop 是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。
另外,每次父元件更新時,子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了,Vue 會在控制檯給出警告。官方文件解釋
當然我們可以通過emit在子元件中觸發某些事件從而在父元件中修改該資料,這種方法肯定不是最理想的。
在Vue中,能夠進行資料雙向繫結的屬性,我們應該最先想到的是v-model,繫結input的value值,當我們修改value值的同時能夠改變資料。那麼我們能不能利用v-model這一特點來實現父子元件間某些資料的雙向繫結呢?
當然能! 要不我寫這個幹什麼(逃…)
<div>
<child v-model="message"></child>
<!-- 通過v-model將message繫結在child上 -->
</div>
// 子元件
export default {
name: '',
props: {
// 通過value獲取繫結message值
value: {
type: String,
default: ''
}
},
data: {
// 你的資料
},
methods: {
changeMessage() {
// 通過觸發元件的input事件改變message的值,
// 此時父元件中的message值就改變為你設定的值了
this.$emit('input', 'your message value' )
}
}
})