Vue获取DOM的几种方法总结

<script>
    ...
    mounted () {
        let elm = this.$el.querySelector('#id')
    }
</script>

<template>
    <div ref="bar">{{ foo }}</div>
    <MyAvatar ref="avatar" />
    ...
</template>
<script>
    ...
    mounted () {
        let foo = this.$refs['bar'] // 一个dom元素
        let avatar = this.$refs['avatar'] // 一个组件实例对象
    }
</script>

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
// 在模板中
<template>
    <input v-model="name" v-focus />
</template>

<template>
    <div>
        <div class="box" ref="goodInfo"></div>
    </div>
</template>
<script>
import { onMounted, ref, reactive,nextTick } from 'vue'
export default{
 
    setup(){
    //获取dom
    let goodInfo=ref(null)
    // 狗子函数mounted
    onMounted(()=>{
      GetGoodDetail()
      console.log(goodInfo,'获取dom节点');
      console.log(goodInfo.value,'获取该dom节点的值');
      console.log(goodInfo.value.offsetHeight,'获取该dom节点的高度');
    })
    return {
      // dom对象
      goodInfo
      }
  }
 
}
</script>

<template>
    <div class="container" v-wechat-title="$route.meta.title">
        
    <div class="tree_box">
        <el-tree accordion ref="treeRef" :data="myData.treeData" :props="treeProps" :current-node-key="myData.curId" node-key="id" @node-click="methods.handleNodeClick"
            highlight-current />
    </div>
</div>
</template>
 
<script setup>
 
import { ref,reactive, onMounted,nextTick } from 'vue';
//创建变量treeRef并赋值，同时html模板<el-tree ref="treeRef" />上的ref=treeRef,这样才可以获取到该dom节点。获取dom节点还是要treeRef.value才可以
let treeRef=ref(null)
 
const myData=reactive({
    curId:''
})
//配置el-tree--props
const treeProps = {
    children: 'children',
    label: 'title',
    value:'id',
}
onMounted(() => {
    //默认展开el-tree指定的节点
    nextTick(() => {
       myData.curId=3
       treeRef.value.setCurrentKey(myData.curId)
    })
})
 
</script>

let treeRef=ref(null)