vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案
更新時(shí)間：2021年03月01日 09:43:07 作者：rxliuli
這篇文章主要介紹了vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
場(chǎng)景
今天在使用 v-model 進(jìn)行組件雙向數(shù)據(jù)綁定的時(shí)候遇到了一個(gè)奇怪的問題，網(wǎng)頁本身運(yùn)行正常，瀏覽器一直出現(xiàn)警告信息。
[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"
引發(fā)這個(gè)警告的是一個(gè)自定義組件 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">
當(dāng)前選擇的性別是: {{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: "",
},
});
經(jīng)測(cè)試，程序本身運(yùn)行正常，父子組件的傳值也沒什么問題，雙向數(shù)據(jù)綁定確實(shí)生效了，然而瀏覽器就是一直報(bào)錯(cuò)。
嘗試解決
吾輩找到一種方式
- 為需要雙向綁定的變量在組件內(nèi)部
data聲明一個(gè)變量innerValue，并初始化為value - 在
select上使用v-model綁定這個(gè)變量innerValue - 監(jiān)聽
value的變化，在父組件中value變化時(shí)修改innerValue的值 - 監(jiān)聽
innerValue的變化，在變化時(shí)使用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 的代碼卻多了許多。。。
解決
一種更優(yōu)雅的方式是使用 computed 計(jì)算屬性以及其的 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 雙向綁定父子組件的值遇見的問題及解決方案的詳細(xì)內(nèi)容，更多關(guān)于vue 使用 v-model 雙向綁定父子組件的值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
單元測(cè)試是軟件開發(fā)非常基礎(chǔ)的一部分。單元測(cè)試會(huì)封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問題更容易。Vue 的單文件組件使得為組件撰寫隔離的單元測(cè)試這件事更加直接。它會(huì)讓你更有信心地開發(fā)新特性而不破壞現(xiàn)有的實(shí)現(xiàn)，并幫助其他開發(fā)者理解你的組件的作用。2021-06-06
vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue表單驗(yàn)證插件Vue Validator使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件Vue Validator使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡(jiǎn)單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下2024-05-05
在一般情況下,vue項(xiàng)目代碼部署發(fā)布只需將代碼打包后直接上傳到服務(wù)器即可,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并發(fā)布的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
移動(dòng)端調(diào)試神器vConsole使用詳解
vConsole?是框架無關(guān)的，可以在?Vue、React?或其他任何框架中使用，今天通過本文給大家介紹移動(dòng)端調(diào)試神器vConsole使用，感興趣的朋友一起看看吧2022-04-04
Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問題
這篇文章主要介紹了Vue中ElementUI結(jié)合transform使用時(shí)如何修復(fù)el-select彈框定位不準(zhǔn)確問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue中對(duì)接Graphql接口的實(shí)現(xiàn)示例
本文主要介紹了vue中對(duì)接Graphql接口的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
uni-app是一款基于Vue.js的跨平臺(tái)開發(fā)框架，它借助了 Vue.js 的語法和組件化開發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06