vue3中通过ref()获取到元素

_处女座程序员的日常

已于 2023-02-26 16:27:48 修改

阅读量797

点赞数

分类专栏： vue 前端文章标签： javascript vue.js 前端 typescript

于 2023-02-26 16:20:30 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/129228094

版权

前端同时被 2 个专栏收录

370 篇文章 12 订阅

订阅专栏

vue

210 篇文章 4 订阅

订阅专栏

<template>
<!-- 通过ref()获取到元素 -->
    <p ref="myRef">这是p标签</p>
</template>

<script lang='ts'>
import { defineComponent,ref,onMounted,nextTick } from 'vue'
export default defineComponent({
  setup () {
    let myRef = ref(); // 获取绑定了ref属性，且值为myRef的标签，myRef 一定和标签中的myRef名称要一致
   
    console.log("setup:",myRef.value);  // undefined,这里还没获取到，时机不对，写在onMounted中or nextTick中  
    
    // onMounted(()=>{
    //   console.log("onMounted:",myRef.value);  // 挂载完毕之后，才能获取到元素
    // })
    nextTick(()=>{
      console.log("nextTick:",myRef.value);  // 在下一个dom更新的时候执行（只会调用1次）
    })
    
    return {
      myRef
  
    }
  }
})
</script>