vue在同一個(gè)頁面重復(fù)引用相同組件如何區(qū)分二者
同一個(gè)頁面重復(fù)引用相同組件如何區(qū)分二者
1.使用情境
我在同一個(gè)vue中引用了同樣的一個(gè)圖層選擇的組件，需要區(qū)分二者的選擇的radio值，如果不做區(qū)分，這二者選擇的radio值看上去將會(huì)一樣
2.解決方法
先說原理，這個(gè)重復(fù)引用的組件雖然一樣，但是二者在被創(chuàng)建的時(shí)候各自走了一遍生命周期，所以變量之間不沖突。
首先在引用組件中新增一個(gè)props，這里命名為spareId,用來區(qū)分二者。
然后父組件傳值：
然后在子組件raido中引入這個(gè)spareId：
這樣就能區(qū)分二者選擇的不同值。
原理是這樣，也可根據(jù)實(shí)際情況靈活使用。
在同一個(gè)頁面重復(fù)引用相同組件時(shí)的干擾處理
如標(biāo)題所說，我們在使用vue.js組件時(shí)，會(huì)出現(xiàn)在同一個(gè)頁面會(huì)多次使用相同的組件，更特別的是，組件相同，但數(shù)據(jù)呈現(xiàn)上是完全不同的，有增或有減，但dom交互的處理是一樣的，在這樣的背景下，有可能引起組件數(shù)據(jù)跟需求不一致，交互無法運(yùn)行等問題，這兩個(gè)問題是比較常見的，由 于組件在初始化時(shí)，是共用的作用域，因此，變量數(shù)據(jù)是一致的，另外一個(gè)問題是因此，大部份的情況下，交互編寫可能都會(huì)考慮到dom元素的選取問題，如果組件中出現(xiàn)多個(gè)相同的id,那交互上會(huì)出問題，也不足為奇了。
為了解決如上的問題，我們編寫組件的時(shí)候，需要考慮組件作用域的隔離，dom元素的獨(dú)立性，一般處理方法是，引用時(shí)，采用不同的別名引入多個(gè)相同的組件作為父頁面的實(shí)例，另外一個(gè)思路，是通過父元素傳遞不同的dom來實(shí)現(xiàn)交互隔離。至于數(shù)據(jù)不同，那就可以考慮props來處理了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類名改變樣式的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
elementUi vue el-radio 監(jiān)聽選中變化的實(shí)例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
登錄頁面經(jīng)常會(huì)需要滑動(dòng)驗(yàn)證碼的情況,使用vue插件vue-simple-verify就可以輕松實(shí)現(xiàn),下面小編給大家分享vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了Vue中自定義日志打印插件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11
ubuntu中利用nginx部署vue項(xiàng)目的完整步驟
Nginx是一款輕量級的Web服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-02-02
圖片和文件上傳在很多項(xiàng)目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中使用v-print打印出現(xiàn)空白頁問題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動(dòng)應(yīng)用程序時(shí),經(jīng)常需要使用各種UI組件,其中el-table是一個(gè)常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue如何解決輪播圖(Swiper)第一張圖片一閃而過問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01