Vue3 + Ts 获取dom

在vue2中我们通常 this.$refs 来获取DOM元素,但是在vue3中,setup并没有通过各种方式去绑定this,所以我们需要通过别的方法来进行获取。

1.在DOM中,ref的使用方法和vue2相同。

<div class="score-panel">
       <div>SCORE:<span class="score" ref="scoreSpan">0</span></div>
       <div>LEVEL:<span class="score" ref="levelSpan">1</span></div>
     </div>

2.在script中,可以使用getCurrentInstance配合来获取DOM(注意:不能在onMounted()之外直接使用

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { ScorePanel } from "@/type/sneak";
let refs = null;
onMounted(() => {
  let { $refs } = (getCurrentInstance() as any).proxy; 
  // 你可以打印一下(getCurrentInstance() as any)会在 proxy 中发现 $refs
  refs = $refs;
  const scoreSpan = refs.scoreSpan; // 使用refs获取dom
  const levelSpan = refs.levelSpan;
  //下面这是我实例化了一个ScorePanel类,并将获取的DOM传了过去
  const scorePanel = new ScorePanel(scoreSpan, levelSpan) 
  console.log(scorePanel);
});

</script>

这样,我们就能用refs来获取dom了

3.或者你也可以在onMounted中直接使用 **document.getElementById(“元素id”)**也能拿到对应的dom。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pony君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值