如何扩展Vuetify组件并保留ref引用？

当然可以实现！你的问题在于给自定义组件加ref时，这个ref指向的是自定义组件的实例，而不是内部的Vuetify v-textarea（更不是原生<textarea>元素）。Vuetify的v-textarea之所以能直接调用focus()，是因为它在组件内部封装了这个方法，把底层原生元素的focus操作暴露了出来——我们只需要给自定义包装组件做同样的处理就行。

解决方案1：在自定义组件中暴露focus()方法 #

修改你的CustomTextarea.vue，步骤如下：

1. 给内部的v-textarea加一个ref
2. 定义一个focus()方法，把调用委托给内部v-textarea的focus()
3. （Vue 3专属）需要显式暴露这个方法，让父组件能访问到

Vue 2 版本：

<template>
  <v-textarea 
    ref="innerTextarea"
    v-bind="$attrs" 
    v-on="$listeners"
  ></v-textarea>
</template>

<script>
export default {
  // 可选但推荐：避免原生属性被绑定到组件根元素上
  inheritAttrs: false,
  methods: {
    focus() {
      // 把focus调用转发给Vuetify的v-textarea实例
      this.$refs.innerTextarea.focus();
    }
  }
}
</script>

Vue 3 版本：

<template>
  <v-textarea 
    ref="innerTextarea"
    v-bind="$attrs" 
    v-on="$listeners"
  ></v-textarea>
</template>

<script setup>
import { ref } from 'vue';

const innerTextarea = ref(null);

// 把focus方法暴露给父组件
defineExpose({
  focus() {
    innerTextarea.value.focus();
  }
});
</script>

之后在Main.vue里，你原来的代码就能正常工作了：

mounted() {
  this.$nextTick(() => {
    this.$refs.myTextArea.focus();
  });
}

为什么这个方法可行 #

Vuetify的v-textarea组件本身就实现了focus()方法，会触发底层原生<textarea>的聚焦操作。我们在自定义组件里封装这个方法，就相当于复刻了Vuetify的逻辑——父组件调用自定义组件ref的focus()时，实际上是在调用内部Vuetify组件的聚焦方法。

备选方案：直接访问内部Vuetify组件（不推荐） #

如果你不想封装方法，也可以直接从父组件访问自定义组件内部的v-textarea：

mounted() {
  this.$nextTick(() => {
    this.$refs.myTextArea.$refs.innerTextarea.focus();
  });
}

但这种方式不推荐，因为它让父组件和自定义组件的内部结构强耦合了——如果以后你修改了内部ref的名字或者组件结构，父组件的代码就会失效。封装方法的方式更易维护。

内容的提问来源于stack exchange，提问作者nachocab