Vue.js 如何扩展Vuetify组件并保留ref？

我目前使用的

v-textarea

如下：

# Main.vue
v-textarea(ref="myTextArea")

# Main.vue
CustomTextarea(ref="myTextArea")

我想在它周围放一个透明的包装，这样我就可以在整个应用程序中使用相同的定制版本。我正在这样做：

# CustomTextarea.vue
<template>
  <v-textarea v-bind="$attrs" v-on="$listeners"></v-textarea>
</template>

问题是现在我的

ref

不再指向实际的

（它指向自定义组件），因此类似的内容不再起作用：

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

---

我不理解Vuetify使用的魔力，但它确实在

v-textarea

中起作用。在我的定制组件中有没有同样的方法？

好的，我想我找到了答案

我只需要创建方法并手动调用它：

# CustomTextarea.vue
<template>
  <v-textarea 
    v-bind="$attrs" 
    v-on="$listeners"
    ref="input" //- <= add this
  ></v-textarea>
</template>

<script>
export default {
  name: 'BaseTextarea',

  methods: {
    focus() {
      this.$refs.input.focus(); //- <= call it here
    },
  },
};
</script>

#CustomTextarea.vue