vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案
場景
今天在使用 v-model
進行組件雙向數據綁定的時候遇到瞭一個奇怪的問題,網頁本身運行正常,瀏覽器一直出現警告信息。
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
引發這個警告的是一個自定義組件 RxSelect
Vue.component("RxSelect", { model: { prop: "value", event: "change", }, props: { value: [Number, String], map: Map, }, template: ` <select v-model="value" @change="$emit('change', value)" > <option v-for="[k,v] in map" :value="k" :key="k" >{{v}}</option> </select> `, });
吾輩使用的代碼看起來代碼貌似沒什麼問題?
<main id="app"> 當前選擇的性別是: {{map.get(sex)}} <div> <rx-select :map="map" v-model="sex" /> </div> </main>
JavaScript 代碼
new Vue({ el: "#app", data: { map: new Map().set(1, "保密").set(2, "男").set(3, "女"), sex: "", }, });
經測試,程序本身運行正常,父子組件的傳值也沒什麼問題,雙向數據綁定確實生效瞭,然而瀏覽器就是一直報錯。
嘗試解決
吾輩找到一種方式
- 為需要雙向綁定的變量在組件內部
data
聲明一個變量innerValue
,並初始化為value
- 在
select
上使用v-model
綁定這個變量innerValue
- 監聽
value
的變化,在父組件中value
變化時修改innerValue
的值 - 監聽
innerValue
的變化,在變化時使用this.$emit('change', val)
告訴父組件需要更新value
的值
Vue.component("RxSelect", { model: { prop: "value", event: "change", }, props: { value: [Number, String], map: Map, }, data() { return { innerValue: this.value, }; }, watch: { value(val) { this.innerValue = val; }, innerValue(val) { this.$emit("change", val); }, }, template: ` <select v-model="innerValue"> <option v-for="[k,v] in map" :value="k" :key="k" >{{v}}</option> </select> `, });
使用代碼完全一樣,然而組件 RxSelect
的代碼卻多瞭許多。。。
解決
一種更優雅的方式是使用 computed
計算屬性以及其的 get/set
,代碼增加的程度還是可以接受的
Vue.component("RxSelect", { model: { prop: "value", event: "change", }, props: { value: [Number, String], map: Map, }, computed: { innerValue: { get() { return this.value; }, set(val) { this.$emit("change", val); }, }, }, template: ` <select v-model="innerValue"> <option v-for="[k,v] in map" :value="k" :key="k" >{{v}}</option> </select> `, });
以上就是vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案的詳細內容,更多關於vue 使用 v-model 雙向綁定父子組件的值的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- vue自定義組件如何通過v-model指令控制組件的隱藏、顯示
- vue中v-model指令與.sync修飾符的區別詳解
- vue原生input輸入框原理剖析
- vue3.0-props、computed、自定義事件方式
- vue修飾符v-model及.sync原理及區別詳解