# Vue學習#8 Vue 開啟 Bootstrap5 Modal 元件
###### tags: `Vue 直播班 - 2022 春季班` `Vue`

## [範例](https://codepen.io/binlandz123/pen/XWVygPg?editors=1010)
## [Bootstrap5 modal 官方](https://bootstrap5.hexschool.com/docs/5.0/components/modal/#via-data-attributes)

## 如何開啟

### 要用到的語法 : refs

在根元件中利用 refs 直接操作 Modal 的元件開啟(關閉)方法

### STEP1 Modal COMPONENT 實體化

在 Bootstrap 5 中有提供如何利用 JS 開啟 Modal

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

那要怎麼如何開啟哩?

1. 在 元件 template 中的 modal 添加 refs ，並新增一個變數用來存放 modal
2. 在 mounted 中使用 bootstrap5 所給的語法 ， 其中將 `document.getElementById('myModal')` 換成 tempalte 的 refs 名稱， var myModal 改成我們所設立的變數
3. 撰寫 function 來達成 modal 的開啟(關閉) ， 分別是 `show()` 跟 `hide()`


### STEP2 根元件透過 refs 直接使用 Modal 元件的 show (hide) 來開啟


1. 在元件標籤定義 refs 名稱
2. 在根元件定義 function 並使用 Modal 元件的 `openModal` 方法
3. 在 HTML 的 button 中 用 `v-on` 來綁定根元件 openModal 方法

這樣就完成了!

## 注意

### 在 template 所定義的 refs 只是為了讓 Modal 元件可以實體化
### 使用方法還是要另外在元件標籤去定義另一個 refs 來操作元件函式