vue2+ts中@Ref的使用
<template><section><div id="refId1"ref="refA"class="list">本元素的id:{{ refId }}</div></section></template><script lang="ts">import { Vue, Component, Ref } from '
·
<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>
更多推荐
已为社区贡献1条内容
所有评论(0)