如何扩展 Vuetify 组件并保留 ref？答案

【问题标题】：How to extend a Vuetify component and keep the ref?如何扩展 Vuetify 组件并保留 ref？
【发布时间】：2019-01-19 10:44:07
【问题描述】：

我目前正在使用这样的v-textarea：

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

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

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

我是这样使用它的：

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

问题是现在我的ref 不再指向实际的<textarea>（它指向自定义组件）所以这样的东西不再起作用：

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

我不了解 Vuetify 使用的魔法，但它在 v-textarea 中确实有效。有没有办法在我的自定义组件中做同样的事情？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

好的，我想我找到了答案here。

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

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

我想知道是否有任何方法可以自动执行此操作，但目前可以。

【讨论】：