Vue組件間的雙向綁定示例解析
何為組件間雙向綁定
我們都知道當(dāng)父組件改變了某個(gè)值后,如果這個(gè)值傳給了子組件,那么子組件也會(huì)自動(dòng)跟著改變,但是這是單向的,使用v-bind
的方式,即子組件可以使用父組件的值,但是不能改變這個(gè)值。組件間的雙向綁定就是對(duì)于父組件的變更,子組件可以感知到,同樣對(duì)于子組件的變更,父組件也可以感知到。這個(gè)過程是自動(dòng)的。Vue中的雙向綁定用v-model
來實(shí)現(xiàn)
示例解析
這里我們還是以一個(gè)計(jì)數(shù)器組件來介紹Vue的雙向綁定,我們定義一個(gè)Div顯示一個(gè)數(shù),當(dāng)我們點(diǎn)擊這個(gè)數(shù)的時(shí)候,讓這個(gè)數(shù)加1,代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>組件間雙向綁定</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data() { return { count:1 } }, methods:{ handleCountOneChange(count){ this.count = count; } }, template: ` <div> <counter v-model:count = "count" @change-count-one="handleCountOneChange"/> </div> ` }); app.component('counter',{ props:['count'], methods: { handleItemClick(){ this.$emit('change-count-one',this.count + 1); }, }, template: `<div @click="handleItemClick">{{count}}</div> ` }); const vm = app.mount('#root'); </script> </html>
在之前我們要將父組件傳過來的值做加一操作的時(shí)候,由于是單向數(shù)據(jù)流,我們只能把父組件傳來的值先拷貝一份到子組件,然后讓子組件去改變自己的這個(gè)值來達(dá)到子組件的計(jì)數(shù)效果,本節(jié)所講的雙向數(shù)據(jù)綁定可以在子組件中將這個(gè)值加一后傳到父組件,父組件收到這個(gè)值以后又會(huì)同步給子組件,這樣就完成了一個(gè)計(jì)數(shù)器。如上面代碼所示,父組件通過v-model的方式將count傳給子組件,子組件收到這個(gè)值后,當(dāng)用戶點(diǎn)擊了div后,就會(huì)執(zhí)行handleItemClick方法,這個(gè)方法會(huì)通過事件的方式,將count+1的值通知給父組件,父子組件由于是雙向綁定的,所以這個(gè)count的值又會(huì)被子組件感知到然后子組件就顯示了count+1 的值了,如此循環(huán),點(diǎn)擊一次,值就加一。就完成了counter組件的計(jì)數(shù)功能了。
這里需要注意的是,父組件傳遞值的時(shí)候用法是: v-model:count = "count" 不要忘記后面的“:count”少了是無法顯示的
那假設(shè)我們不想使用:count
的方式呢,那就可以用指定的一個(gè)關(guān)鍵字modelValue
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>組件間雙向綁定</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data() { return { count:1 } }, methods:{ handleCountOneChange(count){ this.count = count; } }, template: ` <div> <counter v-model = "count" @change-count-one="handleCountOneChange"/> </div> ` }); app.component('counter',{ props:['modelValue'], methods: { handleItemClick(){ this.$emit('change-count-one',this.modelValue + 1); }, }, template: `<div @click="handleItemClick">{{modelValue}}</div> ` }); const vm = app.mount('#root'); </script> </html>
注意此處只能叫modelValue,其他的名字都不可以
總結(jié)
其實(shí)本文的內(nèi)容非常簡單,就是使用v-model來實(shí)現(xiàn)vue組件之間的雙向綁定,這里面有個(gè)事件的概念,就是 this.$emit('change-count-one',this.count + 1);
這個(gè),這個(gè)可以理解成一個(gè)事件通過$emit()
發(fā)送,父組件通過@change-count-one="handleCountOneChange"
去監(jiān)聽,然后執(zhí)行對(duì)應(yīng)的操作。這個(gè)下次講。本章就只講通過v-model
的方式來實(shí)現(xiàn)組件間雙向綁定,但是需要注意父組件傳值的屬性名若要用自己的值就用v-model:自定義屬性名 = "data()方法中定義的值"
,的方式,子組件通過prop:['自定義屬性值']
方式接收,或者是使用modelValue
作為傳值的屬性名
到此這篇關(guān)于Vue組件間的雙向綁定示例解析的文章就介紹到這了,更多相關(guān)Vue組件間雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01簡單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02Vue Element使用icon圖標(biāo)教程詳解(第三方)
element-ui自帶的圖標(biāo)庫不夠全,還是需要需要引入第三方icon。下面小編給大家?guī)砹薞ue Element使用icon圖標(biāo)教程,感興趣的朋友一起看看吧2018-02-02vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04