在vue中使用setter改寫父子組件傳的值
阿新 • • 發佈:2018-12-24
設置 tle 定義 遇到 命名 解決 put 響應 http
概述
最近在用muse ui的時候碰到一個問題,簡單來說是這樣的,父子之間傳值,父組件和子組件使用相同的props命名,並且子組件不用emit,而用等號賦值。
最後使用計算屬性的setter函數解決了,記錄下來,供以後開發時參考,相信對其他人也有用。
父子組件傳值
根據官方文檔裏面對於sync的描述,可以使用如下方法進行父子組件的傳值。
1.父組件在調用子組件的時候使用sync。
<text-document :childTitle.sync="title"></text-document>
上面的代碼會被vue處理成下面的形式:
<text-document :childTitle="title" @update:childTitle="this.title=$event"> </text-document>
2.子組件在定義的時候使用childTitle和emit。在子組件定義的時候,通過props把childTitle傳進去就可以使用了,然後通過emit來更新childTitle的值。使用emit的語法如下:
this.$emit('update:childTitle', val);
遇到的問題
一般情況下,使用上面的方法來進行父子組件互相傳值已經足夠了,但是如果需要加上下面2個條件呢:
- 父子組件的變量使用相同的命名。
- 子組件不使用emit,而是使用等號進行更新。
對於問題1,直接用相同的命名即可,沒有任何問題;但是對於問題2,如果用等號更新的話,開發者工具裏面就會報錯:不能改變props裏面的值。
解決方法
於是我們考慮使用setter來設置一個中間變量,在修改這個變量的時候順帶使用emit修改父組件傳進來的值。代碼如下:
// 省略了其他內容
props: ['childTitle'],
computed: {
title: {
get: function() {
return this.childTitle;
},
set: function(val) {
this.$emit('update:childTitle', val);
}
}
}
問題思考
1.vue就是通過這個原理來更新的。
2.可以考慮寫一個vue庫或者npm庫,把emit響應轉化為等號賦值。
在vue中使用setter改寫父子組件傳的值