vue3定义$refs

在Vue3中，定义$refs的方式与Vue2相同。每个Vue组件实例上都包含一个$refs对象，该对象存储对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象。你可以在模板中使用ref属性来定义引用名称，然后通过this.$refs来获取对应的引用。

例如：

<template>
  <h3 ref="myRef">MyRef组件</h3>
  <button @click="getRef">获取$refs引用</button>
</template>

<script>
export default {
  methods: {
    getRef() {
      console.log(this.$refs.myRef);
      // 在Vue3中，可以通过this.$refs.引用名称来获取DOM元素的引用
      // 操作DOM元素，例如修改文本内容
      this.$refs.myRef.textContent = '修改后的文本';
    }
  }
}
</script>

在上述代码中，通过在h3元素上定义ref属性为"myRef"，我们可以在getRef方法中使用this.$refs.myRef来获取该DOM元素的引用，并进行相应的操作。

请注意，在Vue3中，也可以使用ref函数和setup函数来定义和使用引用，但以上示例是基于选项API的写法。

希望能帮到你！如果还有其他问题，请随时提问。