爱学习IT200.cn在类组件中组件的引用（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><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 中的文本内容了。