你需要在安装程序中创建ref常量，然后返回它，这样它就可以在html中使用。

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

import { ref, onMounted } from 'vue';

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

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

    return { table };
}

关于Laravel Inertia：

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

<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

如果需要，可以在父组件中使用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>

对我来说，ref变量没有绑定到组件，因为它还没有呈现。我将扩展@dantheman的解决方案。考虑以下情况：

<template>
    <div v-if="false">
        <div ref="table"/>
    </div>
</template>

import { ref, onMounted } from 'vue';

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

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

    return { table };
}

在这种情况下，由于条件而没有呈现<div ref="table"/>，const table仍然是null。假设false变成了true，那么const table就被填充了。这一点在文档中也有明确说明：
请注意，只能在安装元件之后访问参照。如果尝试访问模板表达式中的输入，则在第一次呈现时它将为null。这是因为元素直到第一次渲染之后才存在！
因此，您不仅需要查找onMounted，还需要查找ref所连接的组件是否实际安装。

如果你使用vue 3和composition API，那么Template Ref允许你这样做。
你可以在初始渲染后访问DOM。因为在创建dom之前会运行script setup。所以使用onMounted钩子可以访问目标元素。
您可以阅读此博客以了解更多关于template Refhttps://medium.com/@plabonislam/how-to-access-dom-element-using-vue-3-compostion-api-2181d69abee6

<script setup>
 import { onMounted, ref } from "vue";
 const headline=ref(null);
 onMounted(()=>{
 console.log(headline.value) 
 
 }
</script>

<template>
 <h1 ref="headline"> hello world </h1>
</template>

也许TypeScript更容易做到这一点。这对我很有效：

const table = ref<HTMLDivElement | null>(null);