<template>
    <section>
        <div id="refId1"
             ref="refA"
             class="list">本元素的id：{{ refId }}</div>
    </section>
</template>

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

    @Component
    export default class RefComponent extends Vue {
        // 原写法
        // this.refId = this.$refs.refA.id;

        private refId = '';

        // 写一个只读变量 refA，设置类型，加一个Ref装饰器。再调用refA这个变量时会自动从$refs中获取
        // 使用装饰器的优点是，在调用this.refA时，会有方法和属性提示
        @Ref() readonly refA!: HTMLDivElement;

        mounted() {
            this.refId = this.refA.id;
        }
    }
</script>