vue在同一個頁面重復引用相同組件如何區(qū)分二者
更新時間：2022年08月11日 11:43:15 作者：銘凈止水
這篇文章主要介紹了vue在同一個頁面重復引用相同組件如何區(qū)分二者，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
同一個頁面重復引用相同組件如何區(qū)分二者
1.使用情境
我在同一個vue中引用了同樣的一個圖層選擇的組件，需要區(qū)分二者的選擇的radio值，如果不做區(qū)分，這二者選擇的radio值看上去將會一樣
2.解決方法
先說原理，這個重復引用的組件雖然一樣，但是二者在被創(chuàng)建的時候各自走了一遍生命周期，所以變量之間不沖突。
首先在引用組件中新增一個props，這里命名為spareId,用來區(qū)分二者。
然后父組件傳值：
然后在子組件raido中引入這個spareId：
這樣就能區(qū)分二者選擇的不同值。
原理是這樣，也可根據(jù)實際情況靈活使用。
在同一個頁面重復引用相同組件時的干擾處理
如標題所說，我們在使用vue.js組件時，會出現(xiàn)在同一個頁面會多次使用相同的組件，更特別的是，組件相同，但數(shù)據(jù)呈現(xiàn)上是完全不同的，有增或有減，但dom交互的處理是一樣的，在這樣的背景下，有可能引起組件數(shù)據(jù)跟需求不一致，交互無法運行等問題，這兩個問題是比較常見的，由 于組件在初始化時，是共用的作用域，因此，變量數(shù)據(jù)是一致的，另外一個問題是因此，大部份的情況下，交互編寫可能都會考慮到dom元素的選取問題，如果組件中出現(xiàn)多個相同的id,那交互上會出問題，也不足為奇了。
為了解決如上的問題，我們編寫組件的時候，需要考慮組件作用域的隔離，dom元素的獨立性，一般處理方法是，引用時，采用不同的別名引入多個相同的組件作為父頁面的實例，另外一個思路，是通過父元素傳遞不同的dom來實現(xiàn)交互隔離。至于數(shù)據(jù)不同，那就可以考慮props來處理了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在vue3中,如果你用reactive聲明了一個對象,用另一個對象直接給它賦值,那么它就會失去響應式,下面這篇文章主要給大家介紹了關于Vue3中reactive丟失響應式問題的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
今天小編就為大家分享一篇Vue實現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue實現(xiàn)的組件兄弟間通信功能,結合實例形式分析了vue兄弟組件間通信的原理與相關操作技巧,需要的朋友可以參考下2018-12-12
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關于如何在vite里獲取env環(huán)境變量的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中的事件加判斷條件如何進行選擇性點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue slot用法(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了vue src動態(tài)加載請求獲取圖片的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10