Question

我目前正在这样使用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中使用。是否可以在自定义组件中执行相同的操作？

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

我想知道是否有任何方法可以自动执行此操作，但是它现在可以使用。

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

1 个答案: