Skip to content

在类组件中组件的引用(ref)同样是一个特殊的类属性,这个类属性是由 @Ref 装饰器描述的一个只读属性。

VUE
<script lang="ts">
import { Component, Ref, Vue } from 'vue-facing-decorator';

@Component({
  name: 'MyComponent',
})
export default class MyComponent extends Vue{

  @Ref
  readonly refEl!: HTMLDivElement;

  mounted() {
    console.log(this.refEl.innerText);
  }
}
</script>

<template>
  <div ref="refEl">Hello World</div>
</template>

[^注]: 在组件挂在后即可通过声明的 refEl 属性正常的 div 中的文本内容了。