---
# System prepended metadata

title: Vue學習#21 refs
tags: [Vue 直播班 - 2022 春季班]

---

# Vue學習#21 refs 
###### tags: `Vue 直播班 - 2022 春季班`

## 什麼是 refs 
透過 `refs` 可以操作 DOM 元素的方法或是操作元件的 method 、 data 

## 使用方法
### 1. 在 HTML 或是元件標籤內加入 `ref="自定義名稱"`
![](https://i.imgur.com/ua2lQ6R.png)
![](https://i.imgur.com/oRJ0TdS.png)

### 2. 透過這個 ref 自定義名稱就可以操作方法或是資料 ， 語法為 `this.$refs.自定義名稱` + 想操作的方法或是 data

card 是一個元件，透過 `refs` 更改元件的資料
![](https://i.imgur.com/OO9CeQ7.png)

透過 `refs` 操作 `input` DOM 元素，並執行 focus() 
![](https://i.imgur.com/3btKuYH.png)

## 透過 refs 利用 JS 操作 Bootstrap5 的 Modal 等等元件

### [傳送門](https://hackmd.io/t6ZySuilRxacVjPbjrXncA)



