vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路

最新推荐文章于 2024-05-08 15:01:07 发布
最新推荐文章于 2024-05-08 15:01:07 发布
阅读量1k 收藏 1
点赞数 1
文章标签： vue 动态组件名 vue 获取父组件里的ref

有时我们在mouted方法中想通过id读取到一个dom元素，虽然官方并不推荐这种方法来操作dom。但难免有碰到这种情况，如下面

3bb7687e8b882a73ea13c0f7f714949c.png

一个dom元素

6abb5fc18ad861808d5c54c096230162.png

试图在mouted中获取 试图在nextick中获取 结果还是为空

究其原因，还是该dom元素未在文档中生成。所以用document.getelementId 是无法获取到该元素的

解决方法

在vue文档中 关于的自定义指示器中有这么一段话

6dd1f48b8d7328e3a48757ca3c64f316.png

通过自定义指示器的insertd hook 我们可以捕获该元素被插入到父节点的时刻，做进一步处理

于是我们可以封装这么一个directive

42402fe7e7fd5533c46cecb13cad1c2b.png

然后在你需要捕获的dom元素中写入v-lazydom

d7932f2b0d36a1dacf017208306804b9.png

只要在你包含该元素的组件中 定义一个lazyready 方法 便可获取到该元素

ecd8619d5cfa496234ed8f6d64990b36.png

至少显得比直接使用settimeout干净点

如果你有多个元素需要捕获 的话，lazyready会触发多次，这时你可以通过捕获元素的id或者tag来区分，就不展开了

weixin_39748858
关注
vue3在mounted中获取元素null
qq_48217454的博客
07-07 521
【代码】vue3在mounted中获取元素null。
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9759
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
Vue3--ref使用（解决ref无法获取dom元素的问题）
热门推荐
韦_恩的博客
05-18 5万+
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响.
created mounted 动态获取数据渲染后，获取DOM问题
weixin_34224941的博客
07-19 3027
口水记录一个问题。 ┓(;´_｀)┏ 写代码的时候，遇到一个问题，就是在created里面调用接口获取数据，利用v-for渲染DOM后，再在mounted里面调用渲染后的DOM时，一直无法获取到，显示为undefined。 按照VUE的生命周期来说 created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。 mounted模板编译/挂载之后。 按道理，在moun...
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 7745
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
vue 路由子组件created和mounted不起作用的解决方法
10-16
在Vue组件的生命周期中，`created`钩子是在实例创建后立即调用，此时组件的DOM还未生成，而`mounted`钩子在组件挂载完成后调用，此时组件已经渲染到DOM中。如果`created`和`mounted`在`keep-alive`下不触发，可能是...
vue组件中watch props根据v-if动态判断并挂载DOM的问题
10-17
在Vue.js开发中，组件之间的数据通信和DOM的动态挂载是常见的操作。本文探讨的问题是在Vue组件中如何正确地使用watch和props根据条件渲染DOM元素，并且使用echarts图表库进行数据可视化。以下是对该问题进行的技术...
vue mounted组件的使用
08-27
在 Vue 中，Mounted 组件是一个非常重要的概念，它是 Vue 实例生命周期中的一个阶段，在这个阶段，Vue 实例已经被挂载到 DOM 中，可以进行后端请求、数据处理等操作。今天，我们将深入探讨 Vue Mounted 组件的使用，...
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$...
浅谈vue中document.getElementById()拿到的是原值的问题
10-15
主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 2815
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
vue3 获取DOM元素得到null
最新发布
weixin_43996255的博客
05-08 513
通过document.getElementById('three')获取div元素为null，但是通过document.getElementById('app')可以得到。同步执行js时，id为app的div已经加载完了，但是组件中的dom还没有加载完，所以通过异步的方式获取到。这nextTick钩子中获取元素。
vue中onmounted周期里获取不到dom的原因
zn_firm的博客
12-12 1248
2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到 相关dom的。重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样。动态dom有2种情况：1）带有v-if指令，获取不到值为false的那个dom。在onmounted里可以获取到任意一个。dom，对于动态dom，他是获取不到的。注意，这里说的是静态。
vue mouted 获取dom元素显示null
m0_50981596的博客
07-18 1042
vue mouted 获取dom元素显示null
关于mounted中拿不到elementUI组件的DOM元素问题
qq_45279180的博客
08-04 1340
最近发现了一个ElementUI的小问题，就是会出现mounted中拿不到elementUI组件的DOM元素的情况出现。我的情景如下：     在使用el-table组件时有一个需求就是有一列是一个输入框，所以我使用了插槽。后来有一个操作是需要操作输入框的DOM的，所以我就在原生事件中获取了一下，这个时候是没问题的，后来我想到获取的值可能复用所以想拿到mounted里赋值，不过拿到的结果是一个空数组。     我还是感觉挺不可
vue中mounted中无法获取到dom元素
weixin_34267123的博客
10-10 6212
一、解决方案： 加上异步setTimeout，延迟获取dom的代码的执行 mounted() { // debugger this.$nextTick(()=> { setTimeout(()=> { let el = document.querySelector('.table') console.lo...
vue在mounted中无法获取$refs绑定的dom元素
InterestAndFun的博客
12-23 5037
分析问题、解决问题 根据vue中的钩子函数来说，mounted是渲染完成之后再执行的，这时候dom元素是加载完成了的。根据$refs去获得绑定的元素，如果元素已经是加载完成的话，那绝对是能够获取到的。所以出现这种情况，只有一种可能：你的$refs所在的标签并未被渲染。 这时候就需要检查你的渲染条件是使用了v-if还是v-show，v-if只有当条件成立才去渲染dom元素，所以在条件不成立时，该元素并未被渲染。而且，当条件成立，渲染完成之后，若所选择的条件不成立，该dom元素还会被销毁。 v-show会由始到
vue2.0中，由于页面完成之后dom还未加载完成如何进行操作
xiaozhen0610的博客
07-18 1100
再vue中，当页面加载完成以后，dom还没有加载，是无法获取进行操作的，但是在vue2.0中提供了一个方法：this.$nextTick,在这个回调函数里面写dom操作即可： 如下代码： created() { this.$nextTick(() => { //do somthing });　 其实这里还有一个小技巧，就是用settimeout(fn,20),来取代this.$nextTick,（20 ms 是一个经验值，每一个 Tick 约为 17 m
Vue2动态组件实现与常见问题解析
在 Vue2 中，自定义动态组件是一项强大的功能，它允许我们在运行时根据不同的条件或数据动态加载和实例化不同的组件。本文将详细介绍如何实现这一功能以及可能会遇到的问题。 首先，理解 Vue.extend 是关键。Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值