vue在同一個頁面重復引用相同組件如何區分二者

Posted on by

同一個頁面重復引用相同組件如何區分二者

1.使用情境

我在同一個vue中引用瞭同樣的一個圖層選擇的組件，需要區分二者的選擇的radio值，如果不做區分，這二者選擇的radio值看上去將會一樣

2.解決方法

先說原理，這個重復引用的組件雖然一樣，但是二者在被創建的時候各自走瞭一遍生命周期，所以變量之間不沖突。

首先在引用組件中新增一個props，這裡命名為spareId,用來區分二者。

然後父組件傳值：

然後在子組件raido中引入這個spareId：

這樣就能區分二者選擇的不同值。

原理是這樣，也可根據實際情況靈活使用。

在同一個頁面重復引用相同組件時的幹擾處理

如標題所說，我們在使用vue.js組件時，會出現在同一個頁面會多次使用相同的組件，更特別的是，組件相同，但數據呈現上是完全不同的，有增或有減，但dom交互的處理是一樣的，在這樣的背景下，有可能引起組件數據跟需求不一致，交互無法運行等問題，這兩個問題是比較常見的，由 於組件在初始化時，是共用的作用域，因此，變量數據是一致的，另外一個問題是因此，大部份的情況下，交互編寫可能都會考慮到dom元素的選取問題，如果組件中出現多個相同的id,那交互上會出問題，也不足為奇瞭。

為瞭解決如上的問題，我們編寫組件的時候，需要考慮組件作用域的隔離，dom元素的獨立性，一般處理方法是，引用時，采用不同的別名引入多個相同的組件作為父頁面的實例，另外一個思路，是通過父元素傳遞不同的dom來實現交互隔離。至於數據不同，那就可以考慮props來處理瞭。 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：