vue自定義組件實(shí)現(xiàn)雙向綁定
場(chǎng)景：
我們比較常用的父子組件之間的交互方式：
父組件通過(guò)props將數(shù)據(jù)流入到子組件；
子組件通過(guò)$emit將更新后的數(shù)組發(fā)送的父組件；
今天，我們通過(guò)另一種方式實(shí)現(xiàn)交互，參考input框的v-model，實(shí)現(xiàn)自定義組件的雙向數(shù)據(jù)綁定。
即：父組件值改變，子組件的值跟著改變；反之，子組件值發(fā)生變化，父組件值隨之變化
子組件定義：
由于不能直接修改props屬性值，我們這里定義valueData，通過(guò)監(jiān)聽實(shí)時(shí)接收value值，通過(guò)click方法修改valueData。
這里注意model語(yǔ)法糖prop 是接收的props屬性value，保持一致。event是先上傳遞的事件名。
代碼如下：
<template>
<div>
<div>{{ `子組件值: ${value}` }}</div>
<div @click="click">點(diǎn)擊此處修改值</div>
</div>
</template>
<script>
export default {
name: "",
model: {
prop: "value",
event: "change"
},
props: {
value: Number
},
components: {},
data() {
return {
valueData: ""
};
},
watch: {
value(newValue, oldValue) {
this.valueData = newValue;
console.log(`子組件值：${newValue}`);
}
},
created() {
},
mounted() {
},
methods: {
click() {
this.valueData++;
this.$emit("change", this.valueData);
}
}
};
</script>
<style lang='less' scoped>
</style>
父組件定義：
父組件通過(guò)v-model綁定text值，名稱不一定是value，可以是其他任意符合命名規(guī)范的字符串，這里是text。
子組件通過(guò)change事件更新數(shù)據(jù)后，v-mode綁定值隨之變化。
或者父組件修改text值后，子組件value值隨之變化。
代碼如下：
<template>
<div>
<div>{{ `父組件值：${text}` }}</div>
<div @click="click">點(diǎn)擊此處修改值</div>
<span>-----------------------------------------------------------</span>
<test-children v-model="text"></test-children>
</div>
</template>
<script>
import TestChildren from "@/views/TestChildren";
export default {
name: "",
components: { TestChildren },
data() {
return {
text: 1
};
},
created() {
},
mounted() {
},
watch: {
text(newValue, oldValue) {
console.log(`父組件值：${newValue}`);
}
},
methods: {
click() {
this.text--;
}
}
};
</script>
<style lang='less' scoped>
</style>
結(jié)果：
直接copy代碼到自己項(xiàng)目測(cè)試。無(wú)論是通過(guò)父組件改變值，還是子組件改變值。兩個(gè)組件通過(guò)v-mode綁定的值始終保持一致。
答疑：
有同學(xué)就問(wèn)了 ，這不是和通過(guò)props向下流入數(shù)據(jù)，再通過(guò)$emit方式向上傳遞數(shù)據(jù)一樣么也能實(shí)現(xiàn)我這種雙向綁定的效果。 其實(shí)不然，如果不通過(guò)v-model，那么我們勢(shì)必會(huì)在父組件寫這樣的代碼：
<test-children @change="changeText"></test-children>
然后在通過(guò)定義changeText方法修改text值。
試想，當(dāng)我們的頁(yè)面比較復(fù)雜，引用組件量比較龐大，頁(yè)面中就需要多定義這樣十幾、二十幾個(gè)方法?？砷喿x行大大降低，增加了維護(hù)成本。
擴(kuò)展：
vue2.3之后提供了sync方式，也能實(shí)現(xiàn)雙向綁定
父組件中的寫法：
<test-children :value.sync="text"></test-children>
子組件中不需要使用下面model定義，直接刪除即可。
model: {
prop: “value”,
event: “change”
},
向父組件傳遞數(shù)據(jù)使用如下方式：
this.$emit("update:value", this.valueData);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
關(guān)于在Vue中import和require的用法分析
在Vue項(xiàng)目中，我們經(jīng)常需要引入外部的模塊或文件，這時(shí)候就會(huì)用到import和require這兩個(gè)關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實(shí)例和解釋,需要的朋友可以參考下2023-06-06
詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法
這篇文章主要介紹了基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過(guò)示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue實(shí)現(xiàn)數(shù)據(jù)篩選與搜索功能的示例代碼
在許多Web應(yīng)用程序中,數(shù)據(jù)篩選和搜索是關(guān)鍵的用戶體驗(yàn)功能,本文將深入探討在Vue中如何進(jìn)行數(shù)據(jù)篩選與搜索的實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行
今天小編就為大家分享一篇關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
解決npm安裝錯(cuò)誤:No matching version found for&
這篇文章主要介紹了解決npm安裝錯(cuò)誤:No matching version found for XXX@3.3.6問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07