[Vue] 進階API-Refs

TL;DR

可以使用Refs快速取出需要的DOM元素

參考資料

相關連結

• Modal Usage Via JavaScript | BS Official

---

Codepen playground

html(#app)

<div id="app">
  <div class="p-5">
    <h3>使用 ref 定義元素</h3>
    <input type="text" ref="inputDOM">

    <h3 class="mt-5">使用 ref 取得元件內的資訊</h3>
    <button type="button" @click="getComponentInfo">取得元件資訊</button>
    <card ref="card"></card>

    <h3 class="mt-5">進階，使用 ref 搭配 Bootstrap</h3>
    <!-- 綁定開啟modal事件的按鈕本身 -->
    <button @click="openModal">開啟 Bootstrap Modal</button>
    <!-- modal本體開始(使用ref去快速讓按鈕指定該DOM元素) -->
    <div class="modal" tabindex="-1" ref="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- modal本體結束 -->
  </div>
</div>

vue

const app = Vue.createApp({
  data() {
    return {
      // 事先建立一個空的資料bsModal，並在mounted生命週期中提供賦予該物件實體到變數上
      // 目的是方便在不同的方法或事件中取用
      bsModal: ''
    }
  },
  methods: {
    getComponentInfo() {
      console.log(this.$refs.card)
      // 直接操作資料也是可行的
      // 但是因為沒辦法確保title屬性一定存在，所以一般不會這樣做
      this.$refs.card.title='被更新的元件標題'
    },
    openModal() {
      this.bsModal.show();
    }
  },
  mounted() {
    // created時資料還沒準備好，故取用refs需要在mounted之後才取得到
    // refs是複數，以物件形式儲存
    console.log(this.$refs);
    // 可以直接操作該元素，在mounted生命週期時直接focus該input
    this.$refs.inputDOM.focus();
    this.$refs.inputDOM.value='3';


    // 
    this.bsModal = new bootstrap.Modal(this.$refs.modal)
  }
})

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文'
    }
  },
  template: `
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          <p class="card-text">{{ content }}</p>
        </div>
      </div>
    `,
}).mount('#app');

使用方法

直接在需要指定的標籤上加上ref="refName"

refName可以自訂，在取用時可以使用this.$refs.refName取到剛剛所指定refName的標籤

e.g: <input type="text" ref="inputDOM">

$refs取得DOM的時機

因為在created生命週期中，資料尚未準備好，所以無法取得我們剛剛透過ref去註冊的DOM元素。

需要等到mounted之後，才可以正確取用到。

元件的ref

如果在元件上使用ref，則可以在ㄜ$refs內完整取得該元件的所有內容（包含data資料等等） e.g:

html(#app)

<div id="app">
  <button type="button" @click="getComponentInfo">取得元件資訊</button>
  <card ref="card></card>
</div>

vue

const app = Vue.createApp({
  data() {...},
  methods: {
    getComponentInfo() {
      // 可以直接透過按鈕更新card內的資料
      this.$refs.card.title='被更新的元件標題'
    },
  },
  mounted() {...}
})

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文'
    }
  },
  template: `
      <div class="card" style="width: 18rem;">
        <div class="card-body">
// title的資料會因為title的值被修改，而跟著動態改變
          <h5 class="card-title">{{ title }}</h5>
          <p class="card-text">{{ content }}</p>
        </div>
      </div>
    `,
}).mount('#app');

應用

開啟bootstrap元件

html(#app)

<div id="app">
  <div class="p-5">
    <h3 class="mt-5">進階，使用 ref 搭配 Bootstrap</h3>
    <!-- click trigger method to open modal -->
    <button @click="openModal">開啟 Bootstrap Modal</button>
    <!-- modal start -->
    <div class="modal" tabindex="-1" ref="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- modal over -->
  </div>
</div>

vue

const app = Vue.createApp({
  data() {
    return {
      bsModal: ''
    }
  },
  methods: {
    openModal() {
      this.bsModal.show();
    }
  },
  mounted() {
    // bootstrap提供原本的方法
    // var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
    this.bsModal = new bootstrap.Modal(this.$refs.modal)
  }
})
app.mount('#app');