如何在 Vue3 中使用 Composition API 獲取 $refs？

Question

我正在嘗試使用 Composition API 在 Vue 3 中獲取 $refs。 這是我的模板，它有兩個子組件，我需要引用一個子組件實例：

<template>
    <comp-foo />
    <comp-bar ref="table"/>
</template>

在我的代碼中，我使用Template Refs ： ref 是一個特殊的屬性，它允許我們在安裝后獲得對特定 DOM 元素或子組件實例的直接引用。

如果我使用 Options API，那么我沒有任何問題：

  mounted() {
    console.log("Mounted - ok");
    console.log(this.$refs.table.temp());
  }

但是，使用 Composition API 時出現錯誤：

setup() {
    const that: any = getCurrentInstance();
    onMounted(() => {
      console.log("Mounted - ok");
      console.log(that.$refs.table.temp());//ERROR that.$refs is undefined
    });
    return {};
  }

誰能說如何使用 Composition API 做到這一點？

Answer 1

您需要在設置中創建 ref const 然后將其返回以便可以在 html 中使用。

<template>
    <div ref="table"/>
</template>

import { ref, onMounted } from 'vue';

setup() {
    const table = ref(null);

    onMounted(() => {
      console.log(table.value);
    });

    return { table };
}

Answer 2

<template>
    <your-table ref="table"/>
    ...
</template>

<script>
import { ref, onMounted } from 'vue';

setup() {
    const table = ref(null);

    onMounted(() => {
      table.value.addEventListener('click', () => console.log("Event happened"))
    });

    return { table };
}
</script>

在您的其他組件中，您可以與已在 onMounted 生命周期掛鈎上注冊的事件進行交互，就像我的示例一樣，我只注冊了一個 evnet

Answer 3

如果需要，您可以在父組件中使用getCurrentInstance() ，如下代碼：

 <template> <MyCompo ref="table"></MyCompo> </template> <script> import MyCompo from "@/components/MyCompo.vue" import { ref, onMounted, getCurrentInstance } from 'vue' export default { components : { MyCompo }, setup(props, ctx) { onMounted(() => { getCurrentInstance().ctx.$refs.table.tempMethod() }); } } </script>

這是子組件的代碼（這里我稱之為MyCompo ）：

 <template> <h1>this is MyCompo component</h1> </template> <script> export default { setup(props, ctx) { const tempMethod = () => { console.log("temporary method"); } return { tempMethod } }, } </script>

Answer 4

關於 Laravel 慣性：

<script setup>
import { ref, onMounted } from "vue";

// a list for testing
let items = [
  { id: 1, name: "item name 1" },
  { id: 2, name: "item name 2" },
  { id: 3, name: "item name 3" },
];

// this also works with a list of elements
let elements = ref(null);

// testing
onMounted(() => {
    
  let all = elements.value;
  let item1 = all[0];
  let item2 = all[1];
  let item3 = all[2];

  console.log([all, item1, item2, item3]);

});
</script>
<template>
  <div>

    <!-- elements -->
    <div v-for="(item, i) in items" ref="elements" :key="item.id">

      <!-- element's content -->
      <div>ID: {{ item.id }}</div>
      <div>Name: {{ item.name }}</div>

    </div>

  </div>
</template>