大部分只是整理筆記，歡迎隨意看看

0%

Vue - ref

發表於 更新於 分類於

前言

原本是在稍微修改之前做過的口罩地圖，因為使用到新的東西所以紀錄一下。
以下為本次使用的一個小記錄。

Vue 的 ref

ref 其實就是 Vue.js 的其中一個 API，會搭配 $refs 來使用。
我們來看看官網上是怎麼寫的：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件
Vue.js 官網

所以藉由上面的描述理解到，我們可以藉由 ref 來取得子組件的內容。

實際使用範例

說明

這邊就以我自己做的口罩地圖來做為範例。
口罩地圖是以 Vue.js 搭配 vue2-leaflet 套件完成。

口罩地圖畫面
從上面這張圖可以看到分為左邊的列表區塊與右邊的地圖區塊，其中當點選左邊列表內的藥局時，右邊地圖會移至該藥局位置。
預期應該是在我點擊藥局時，除了地圖會移動至該藥局位置外，還要跳出詳細資料的視窗才對，如下圖：

口罩地圖彈出視窗
但是我之前做的時候這個功能是沒有完成的，而本次就是藉由 ref 來達成這個功能。

使用 ref

在要使用的原件上給一個 ref="自訂名稱"，接著只要使用 this.$refs.自訂的名稱 就可以取得需要的資料。
以下為修改過程：
首先在原本的 l-marker 標籤上加入 ref="marker"

1
2
3
4
5
6
7
8
9
10
<l-marker
  ref="marker"
  v-for="item in storeList"
  :key="item.properties.id"
  :lat-lng="[item.geometry.coordinates[1], item.geometry.coordinates[0]]"
  >
  <l-popup>
  ...
  </l-popup>
 </l-marker>

接著在原本擷取點擊藥局資訊的程式內加入 console.log(this.$refs.marker); 來看看會取到什麼資料：
擷取的資料
可以看見我們已經取得所有 l-marker 子組件的資料，接著只需要篩選出特定標記並讓它隨著點擊藥局名稱跳出說明就好。

以上就是本次的筆記。