记录：子组件相互嵌套导致不渲染的解决方案

最新推荐文章于 2023-04-25 15:49:52 发布
最新推荐文章于 2023-04-25 15:49:52 发布
阅读量628 收藏
点赞数 2
分类专栏： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295253/article/details/114674483
版权
js 同时被 2 个专栏收录
32 篇文章 0 订阅
订阅专栏
vue
19 篇文章 1 订阅
订阅专栏

简单解释下嵌套场景：
A组件中嵌套了B组件
B组件中嵌套了A组件
C组件也嵌套了A组件或者B组件
类似这种循环相互嵌套的组件（很少有这么狗需求了吧，建议项目中不要这么嵌套）
这种嵌套方式会导致 比如B组件在A组件可以正常渲染，然而在C组件不渲染
经过一番调试，将组件注册到了全局下，得以解决，将此记录下来
如果小伙伴们也遇到了类似问题
那么可以将这些组件注册到全局可以解决这个问题

z.week
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
11-19
以下是两种可行的解决方案： **解决方案1：事件总线（Event Bus）** 可以创建一个全局的事件总线实例，用于在父组件和子组件之间传递消息。父组件监听窗口变化，然后通过事件总线广播这个事件，子组件监听这个事件...
vue router路由嵌套不显示问题的解决方法
12-10
解决方案是在子组件模板的适当位置添加`<router-view>`。 2. **路由配置错误**：确保你的路由配置正确，子路由应当嵌套在父路由的`children`数组中，而不是作为独立的顶级路由。例如： ```javascript const routes...
vue创建多层嵌套时，没法渲染第三层路由
weixin_44058614的博客
04-03 2432
今天有一个问题一直困扰着我一天，因为我设置了3层嵌套，路由信息没有任何错，而且router-view也放在了正确的位置上，但就是渲染不出第三层路由，我的第二层路由页面一直报一个语法错误 ，我没在意，以为它不会影响到路由的渲染，后来我发现我错了，就是因为这个语法错误，导致路由没有嵌套成功。所以写了博客记录下 ...
[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别
YUSIR 完美CODING世界
02-24 525
[Vue warn]:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 --> VDo.
webpack打包vue项目，打包成功，el-table没有渲染出来bug
weixin_44009750的博客
04-25 622
在webpack.config.js文件下加上以上配置就能让打包生成的html文件把el-table渲染出来！
vue3关于动态组件不渲染的问题
yy18194342771_zybzyb的博客
02-23 3690
使用setup语法糖时，通过v-for循环时组件渲染不上。
vue组件渲染不出来，显示＜!---＞
rongyi2233的博客
02-21 982
vue组件显示不出来
vue中出现组件不渲染更新的问题，方法总结
qq_40407998的博客
07-31 3240
vue中出现组件不渲染更新的问题，方法总结 1.用this.$forceUpdate()方法 例如： this.data.status= false; // 数据改变 this.$forceUpdate(); // 调用 2.如果是object或者是array类型的话改变值最好用 this.set(),this.set(),this.set(),this.delete(),array.splice()等方法进行修改 this.$set(this.data,'status',false) 3.用v-i
加速vue组件渲染之性能优化
10-15
针对这个问题，文章提出了两种解决方案： **方案一：使用`Object.freeze()`** 通过调用`Object.freeze()`，可以将对象冻结，使其变得不可变。Vue在尝试拦截并设置getter和setter时，会检测到冻结的对象，并跳过这一...
uni-app:从运行原理上面解决性能优化问题
01-27
本文将探讨uni-app的运行原理，以及如何从这些原理出发解决性能优化问题。 首先，uni-app的运行机制涉及到逻辑层和视图层的分离。逻辑层负责业务逻辑和数据管理，而视图层则处理页面的渲染。在非H5端，逻辑层与视...
vue--子组件在嵌套组件时报错问题
weixin_51040108的博客
10-13 1154
vue--子组件在嵌套组件时报错问题
vue js动态赋值后视图层（HTML）或者组件没有重新渲染
qq_38305872的博客
01-05 2221
vue js动态赋值后视图层（HTML）或者组件没有重新渲染 v-for更新数据不重新渲染页面 文章目录 前言 一、查找问题 二、解决方法 1.强制刷新 2.重新创建 前言 这个问题其实主要是要有一种解决问题的思路，通常做开发工作的都要有一种自己的思路，下面我会说一下我的解决方法。 一、查找问题 首先碰到这种问题你要知道是哪里出错了，下面为一些可能导致这个问题的原因： 1.数据渲染步骤问题 这个问题通常出现在页面刚进入的时候，大家知道vue有一个生命周期，通常我们页面初始
vue项目el-tabs中嵌套echarts插件，切换选项卡，数据获取正常，但是插件无法正常渲染的问题
码农的快乐在于分享
03-16 629
其实非常简单 只需要给插件容器加一个v-if判断即可 判断key === activeName2，就可以正常切换显示了。 <el-tabs v-model="activeName2" @tab-click="handleClickLine" type="card"> <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabLsi
vue 多层对象数据更新 视图不渲染问题
small_fox_dtt的博客
05-11 832
刚开始直接使用（根据下标来修改找到相对应位置修改数据；数据虽然修改成功了；但视图未修改） setRowPath(){ this.list1[this.editIndex].eventLocation=this.temp.eventLocation; this.list1[this.editIndex].referencePath=this.temp.referencePath; this.list1[this.editIndex].radius=this.
vue父传子组件数据不渲染且报错
wingxabc的博客
11-12 1656
在vue开发过程中会遇到这样的一个问题，自己定义了一个组件，然后又定义了个子组件，父组件的数据需要将请求回来的数据传递给子组件，但是引入子组件在页面加载时就报错了，接口数据请求回来了也不渲染，这是因为接口请求和子组件渲染是同步的，子组件没有接收数据，父组件的接口数据请求回来时子组件已经创建好了虚拟dom，所以子组件报错，同时子组件里的prop不想响应的，所以不会再次更新dom，接口请求回来的数据也不会更新。 解决方法1：在子组件条件v-if，在接口请求回来后在渲染。 解决方式2：使用watch或者com
Vue中组件嵌套引用
顺拐小乌龟的博客
05-28 882
Vue中组件嵌套引用需求问题解决 需求 工作中难免会遇到需要在父组件中使用子组件，子组件中又需要引用父组件的情况，简称“套娃引用”。一般出现场景有Menu、Nav组件。小乌龟在最近工作中遇到一种情况，组件A有个子组件B，组件B回去判断当前应用依赖的应用是否已经部署，如果未部署，再打开一个组件A先部署依赖应用（套娃地狱）。 问题 功能逻辑都不复杂，但是当在组件B中引用组件A时，会报组件未定义或应用错误。反复检查拼写、路径是否错误，结果都没问题。想到了应该是组件嵌套引用的问题，导致Vue运行时不是知道先加载那个
微信小程序真机调试组件渲染不出来的解决方法
weixin_45229417的博客
12-30 2001
遇到微信小程序调试的时候，出现查询不到该组件的路径。
Vue三层嵌套路由页面不显示问题，vue-element-admin三层路由显示空白
coderYYY的博客
11-18 2920
渲染不出来是因为第二层那里缺少一个容器，用一个组件专门用来渲染即可。
小程序组件里不渲染setData更新的数据、
最新发布
07-13
5. 检查组件的父组件是否正确传递数据：如果你的组件是嵌套在其他组件中的，确保父组件正确传递数据给子组件。可以通过properties属性定义父组件传递的数据类型，并在父组件中使用绑定方式将数据传递给子组件。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

z.week

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

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

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

打赏作者

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

抵扣说明：

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

余额充值