更新

Question

使用软件包vue-property-decorator。

组件内容：

<template>
  <div>
    <label ref="label">asd</label>
  </div>
</template>

<script lang="ts">
class Someclass extends Vue {
  public $refs!: {
    label: HTMLElement
  }

  private mounted(): void {
    console.log(this.$refs.label) // returns a Vue component, instead of just html
  }
}
</script>

可能是因为this指向类本身。但是，我该如何访问this.$refs.label？

Answer 1

如果将ref放在Vue组件上，则可以像这样访问其DOM元素：

this.$refs.label.$el

this.$refs.label是Vue实例及其API is described here。

关于ref属性：

ref用于注册对元素或子组件的引用。该引用将被注册在父组件的$ refs对象下。如果在纯DOM元素上使用，则引用将是该元素；如果在子组件上使用，则引用将是组件实例。

更新

实际上，您的示例使用的是label元素，而不是组件。我以为您没有在问题中显示完整的代码，而是引用了文档的相关部分。正如您在下面看到的那样，您的代码不会输出您所说的内容。

Vue.component('my-component', {
  template: '<div><label ref="label">asd</label></div>',
  
  mounted() {
    const ref = this.$refs.label;
    console.log(ref);
    console.log("typeof(ref): " + typeof(ref));
    console.log("Is component: " + (ref instanceof Vue));
    console.log("Is HTMLElement: " + (ref instanceof HTMLElement));
  }
})

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component />
</div>

this。$ refs指向类样式组件中的vue组件

1 个答案:

更新