vue自定義組件實現(xiàn)雙向綁定
場景：
我們比較常用的父子組件之間的交互方式：
父組件通過props將數(shù)據(jù)流入到子組件；
子組件通過$emit將更新后的數(shù)組發(fā)送的父組件；
今天，我們通過另一種方式實現(xiàn)交互，參考input框的v-model，實現(xiàn)自定義組件的雙向數(shù)據(jù)綁定。
即：父組件值改變，子組件的值跟著改變；反之，子組件值發(fā)生變化，父組件值隨之變化
子組件定義：
由于不能直接修改props屬性值，我們這里定義valueData，通過監(jiān)聽實時接收value值，通過click方法修改valueData。
這里注意model語法糖prop 是接收的props屬性value，保持一致。event是先上傳遞的事件名。
代碼如下：
<template>
<div>
<div>{{ `子組件值: ${value}` }}</div>
<div @click="click">點擊此處修改值</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>
父組件定義：
父組件通過v-model綁定text值，名稱不一定是value，可以是其他任意符合命名規(guī)范的字符串，這里是text。
子組件通過change事件更新數(shù)據(jù)后，v-mode綁定值隨之變化。
或者父組件修改text值后，子組件value值隨之變化。
代碼如下：
<template>
<div>
<div>{{ `父組件值：${text}` }}</div>
<div @click="click">點擊此處修改值</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代碼到自己項目測試。無論是通過父組件改變值，還是子組件改變值。兩個組件通過v-mode綁定的值始終保持一致。
答疑：
有同學(xué)就問了 ，這不是和通過props向下流入數(shù)據(jù)，再通過$emit方式向上傳遞數(shù)據(jù)一樣么也能實現(xiàn)我這種雙向綁定的效果。 其實不然，如果不通過v-model，那么我們勢必會在父組件寫這樣的代碼：
<test-children @change="changeText"></test-children>
然后在通過定義changeText方法修改text值。
試想，當(dāng)我們的頁面比較復(fù)雜，引用組件量比較龐大，頁面中就需要多定義這樣十幾、二十幾個方法?？砷喿x行大大降低，增加了維護成本。
擴展：
vue2.3之后提供了sync方式，也能實現(xiàn)雙向綁定
父組件中的寫法：
<test-children :value.sync="text"></test-children>
子組件中不需要使用下面model定義，直接刪除即可。
model: {
prop: “value”,
event: “change”
},
向父組件傳遞數(shù)據(jù)使用如下方式：
this.$emit("update:value", this.valueData);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯亂問題)
這篇文章主要介紹了vue-video-player 解決微信自動全屏播放問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識點，有需要的朋友們參考下。2018-11-11
vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
本篇文章主要介紹了vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-10-10
最近在開發(fā)過程對對于組件化的開發(fā)有一些感想，于是開始記錄下這些。彈窗組件一直是 web 開發(fā)中必備的，使用頻率相當(dāng)高，最常見的莫過于 alert，confirm和prompt這些,不同的組件庫對于彈窗的處理也是不一樣的，下面來一起看看吧。2016-09-09
WebRTC作為一種開放標(biāo)準(zhǔn)的實時通信協(xié)議,能輕松實現(xiàn)瀏覽器之間的實時音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過案例實踐,帶大家掌握如何搭建一個音視頻通話應(yīng)用,需要的朋友可以參考下2024-05-05
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue車牌輸入組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了詳解基于Vue，Nginx的前后端不分離部署教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12