如何在 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

关于 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>

Answer 3

<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