vue3使用自定义hooks获取dom元素的问题说明

2024-02-29 16:06:56

使用自定义hooks获取dom元素问题

在自定义hooks的onMounted事件里面获取ref元素，组件调用hooks的时候必须要传递响应式对象。

分享下楼主自己的观点

代码如下

<script>
// demo.vue
import { defineComponent, ref } from 'vue'
import useBars from './useBars'
export default defineComponent({
    props: {
        Bars: Array,
    },
    setup() {
        const rootRef = ref(null)        const { currentPageIndex } = useBars(rootRef) // 这里传递过去的是一个响应式对象
        
         const { currentPageIndex: currentPageIndex1  } = useBars(rootRef) // 这里传递过去的就是一个null，而不是对象
        console.log('组件 setup 最后一段')
        return {
            rootRef,
            currentPageIndex,
        }
    },
})
</script>

// useBar.js
import { onMounted } from 'vue'
export default function useSliders(rootRef) {
    
/**
     * 1. 传递过来是一个响应式对象
     *
     *  传过来是一个响应式对象，调用这个函数的时候rootRef.value = nul
     *  组件实例化完毕，在组件里面 rootRef.value = <div></div>
     *  执行 这个onmonted事件，里面就获取到了一个div，这个onMounted事件是当组件实例化完毕才会执行的
     */
    /**
     *  传过来就是一个null
     *   onMounted 执行的时候自然也是null
     * 
     */
    // ! 感觉是访问同一个地址，如果传递一个响应式对象，然后组件里面给 rootRef.value赋值，这里就也能拿到了
    onMounted(() => {
        // debugger
        console.log('hooks slider mounted --->', rootRef)
    })
    return {}
}```

vue获取/操作组件的dom元素

最近刚做了一个项目，需要用到地图，选择的是腾讯地图，创建地图的时候，需要给地图创建函数中传入地图容器的id或者容器的dom元素，但是在调试过程中，发现怎么都无法获取dom元素，直接通过getElementById也无法获取元素内容。

下面是我的代码内容(非全部内容)

<template>
<a-modal>
    <div id="map"></div>
</a-modal>
</template>

<script>
import TMap from 'TMap'
export default{
    method:{
        open(){
            this.initMap()
        },
        initMap(){
            const center = new TMap.LatLng(39.984120,116.307484)
            const container = document.getElementById('map')
            const map = new TMap.Map(container, {
                center:center,
                zoom:11
            })
        }
    }
}
</script>

页面调试的时候，一直报错，无法读取到id的值，直接打印container的值，却是null，但是看了网上其他使用腾讯地图的例子，基本上是一样的思路。

然后就开始找问题，一直折腾，最后才想到是不是因为我把地图容器放到a-modal组件中的原因，然后对比网上的代码，才发现，别人的都是直接放在template中，或者使用其他html元素包裹，而我把地图容器放到了a-modal组件中。

这时就想到，是不是可以通过a-modal组件来获取dom元素，然后就给a-modal组件加上ref属性，代码如下

<a-modal ref="modal">
    <div id="map"></div>
</a-modal>

然后打印this.$refs.modal,观察打印的对象，看能不能找到dom元素内容，又想到容器元素被a-modal包裹，相当于使用插槽，所以找到了$slots.default属性，在上面找到了渲染的VNode，终于找到了div#map元素。

既然找到了，那把这个元素传给地图创建函数就行，说做就做，立即改代码。

<template>
<a-modal ref="modal">
    <div id="map"></div>
</a-modal>
</template>

<script>
import TMap from 'TMap'
export default{
    method:{
        open(){
            this.initMap()
        },
        initMap(){
            const center = new TMap.LatLng(39.984120,116.307484)
            const container = this.$refs.modal.$slots.default[0]
            const map = new TMap.Map(container, {
                center:center,
                zoom:11
            })
        }
    }
}
</script>

Tip：vue中插槽若没有名称，默认是default，所以default[0]就是default插槽中的第一个元素，即我的div#map，好了，开始调试。

但是还是有问题，地图有时出来，有时出不来，就想到出不来时，是不是因为div元素还没有渲染出来，既然这样，那就使用vue的$nextTick了，修改open函数：

open(){
    this.$nextTick(()=>{
        this.initMap()
    })
},

果然，立马没有问题了，无论何时，地图内容都能正常渲染出来。

最后总结

vue中获取/操作页面dom元素，如果元素与template之间都是html标签，可以直接通过document的获取元素方法来获取元素，但是如果之间有自定义组件，则必须通过组件的$slots来获取dom元素，如果有具名插槽，则要根据插槽名称来查找对应插槽下的元素。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

:id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi
vue如何获取指定元素

目录如何获取指定元素点击获取相应元素如何获取指定元素在想要获取元素上添加“ref” ref="scroll" scroll为函数名 <div ref="scroll">vue获取指定元素</div> xiaFn:function(){ console.log(this.$refs.scroll) } 点击获取相应元素在vue中通过点击事件获取上一个标签.父标签.第一个子标签等元素. 以下元素都是以所点击的元素进行查找
vue.js click点击事件获取当前元素对象的操作

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He
vue第一次获取不到元素的解决方法记录

前言 vue中第一次获取不到元素的解决办法,是否经常第一次点击弹窗按钮,获取弹窗中的元素.打开弹窗获取元素为空,要第二次才能获取. 一.更新dom后获取 this.$nextTick(callback) methods: { play() { //获取元素 console.log($('#video')); this.$nextTick(function() { //获取元素 console.log($('#video')); }); } } 二.通过定时器获取 setTimeOut(fn, 0
vue 获取元素额外生成的data-v-xxx操作

需求描述:由于样式中使用了scoped,所以编译后标签对中生成data-v-xxx属性.在[.dialog_content]的div中动态添加元素节点p和span时,也需要给元素节点添加data-v-xxx属性.由于data-v-xxx属性是会变化的,那如何获取它,添加在动态添加的元素节点中呢?本博客将给出解决方案. [解决方法] 获取属性名[document.getElementById("dialog_submit").attributes[0].name] 设置属性[nodeP
vue类名如何获取动态生成的元素

目录类名获取动态生成的元素如何获取并操作dom元素类名获取动态生成的元素首先注意的是,该元素必须在id为app这个元素里面 new Vue({ el: "#app", }) 其次是由于动态生成的,想获取到该元素,需要在created里使用nextTick. 并且可以 $(’.circle’ + i)拼接想要的元素类名. this.$nextTick(() => { for (var i = 1; i < this.carlist.leng
vue3使用自定义hooks获取dom元素的问题说明

目录使用自定义hooks获取dom元素问题分享下楼主自己的观点 vue获取/操作组件的dom元素下面是我的代码内容(非全部内容) 最后总结使用自定义hooks获取dom元素问题在自定义hooks的onMounted事件里面获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from
详解在Vue中通过自定义指令获取dom元素

vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定
基于vue1和vue2获取dom元素的方法

vue1.*版本中在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素例如:<div class='box' v-el: myBox>你好</div> 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本中在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素例如:<div class='box' ref='myBox'>你好
vue获取dom元素注意事项

mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊
vue 3.0 使用ref获取dom元素的示例

前言附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr
uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

目录前言使用uni.createSelectorQuery() 附:ni-app获取DOM元素信息及跳到指定位置总结前言最近写uniapp,遇到一个需要获取到页面中dom元素,我第一反应是使用this.$ refs进行获取,于是我开心的使用this.$refs写了很多代码,使用h5调试的过程中没有发现任何问题,但后来真机调试的时候发现在app端无效,于是我查看文档发现了: 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view.text 使用uni.createSele
vue获取DOM元素并设置属性的两种实现方法

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值如果给子组件
封装获取dom元素的简单实例

示例如下: <script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css : { addStyle : function(){}, removeStyle
JQuery 获取Dom元素的实例讲解

废话不多说,直接上代码 (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constructor: VP, init: function (selector, context) { var _document = window.document, elem, m
获取dom元素那些讨厌的位置封装代码

介绍解决各个浏览器下获取dom 元素的位置兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大帮助,也用到一个叫布鲁斯 · 李的同学的源码,当然更多资源来源于网络. 功能说明 // jelle(elem) 对象 elem传递对象ID 或者 d