###### tags: `學習` `BootStrap5` `Vue` `元件`
# Vue 使用ref將bootstrap的modal元件化範例
[Vue 元件 boostrap5 modal元件化](https://codepen.io/efzdamnp-the-lessful/pen/LYOOrjX?editors=1111)
1.在modal的元件中的template內 加入ref="theModal" 見範例js第30行。
2.在modal的元件的data加入bsmodal:'' 見範例js第18行。
3.在modal的元件的mounted(){}加入this.bsModal = new bootstrap.Modal(this.\$refs.theModal); 見範例js第49行。
4.在modal的元件寫入開與關的功能 見範例js 第22-27行。
5.在mymodal的html標籤加上 ref="modal" 見範例html 第4行
6.在根元件的methods加上openModal(){this.\$refs.modal.open()} 見範例js 第11行。

<div id="app">
  {{data.name}}
  <div class="btn btn-outline-success" @click="openModal()">open Modal</div>
  <mymodal ref="modal"></mymodal>
</div>

const app = Vue.createApp({
  data() {
    return {
      data: {
        name: "我是根元件"
      }
    };
  },
  methods: {
   openModal(){
     this.$refs.modal.open()
   }
  }
});
app.component("mymodal", {
  data() {
    return {
     bsModal:''
    };
  },
  methods:{
    open(){
      this.bsModal.show()
    },
    close(){
      this.bsModal.hide()
    }
  },
  template: `<div class="modal fade"  tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true" ref="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        我是元件化的Modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
        @click="close()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>`,
  mounted() {
    this.bsModal = new bootstrap.Modal(this.$refs.theModal);
  }
});
app.mount("#app");