Vue文件中的refs屬性取得組件實例的方法詳解-Vue.js-PHP中文網

Vue文件中的refs屬性取得組件實例的方法詳解

PHPz

發布： 2023-06-20 12:18:03

原創

2793 人瀏覽過

Vue.js作為一款前端框架，近年來在前端開發領域的應用越來越廣泛。在Vue的官方文件中，我們可以看到許多有用的開髮指南和技巧。其中，refs屬性是取得元件實例的方法之一，今天我們就來詳細了解這個屬性。

refs屬性的基本概念

refs是Vue.js的一個屬性，用於取得元件中的DOM節點或子元件實例。它可以幫助我們在父元件中存取子元件的DOM元素、方法和屬性，從而直接與子元件進行互動。透過refs屬性，我們可以直接存取子元件內部的資料和方法，而無需透過props和事件來傳遞資料和方法。

refs屬性的用法

refs屬性的基本用法如下：

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <input ref="inputBox" type="text"/>
    <ChildComponent ref="childComponent"/>
  </div>
</template>

登入後複製

在上面的模板中，我們可以透過為DOM節點新增ref屬性，或為子元件新增ref屬性，來取得它們的實例。此時，我們可以在父元件或Vue實例中，使用this.$refs來存取它們的實例。

export default {
  mounted() {
    // 访问inputBox实例
    this.$refs.inputBox.focus();

    // 访问childComponent实例
    this.$refs.childComponent.doSomething();
  }
}

登入後複製

在mounted鉤子中，我們可以透過this.$refs來存取子元件實例，從而取得它們的方法和屬性。例如上述程式碼中，我們可以透過this.$refs.inputBox來存取輸入框的實例，並且呼叫它的focus()方法；同樣地，我們可以透過this.$refs.childComponent來存取子元件的實例，並呼叫它的doSomething()方法。

除此之外，refs屬性還可以透過 [ref v-for] 來建立一個數組，並將每個ref綁定到數組中的每個元素上。

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <div v-for="i in 5" :key="i" :ref="'item'+i">{{ i }}</div>
  </div>
</template>

登入後複製

在上述模板中，我們透過v-for指令來遍歷數組，每個元素都會產生一個編號。之後，我們可以在ref屬性中使用這個編號，來建立一個陣列並將它們分別綁定到每個元素上。

export default {
  mounted() {
    // 访问Ref数组中的元素
    console.log(this.$refs.item1.innerHTML); // 1
    console.log(this.$refs.item2.innerHTML); // 2
    console.log(this.$refs.item3.innerHTML); // 3
    console.log(this.$refs.item4.innerHTML); // 4
    console.log(this.$refs.item5.innerHTML); // 5
  }
}

登入後複製

透過上面的程式碼，我們可以存取每個元素的innerHTML屬性，也就是輸出1、2、3、4、5。