Vue---开发过程中，组件引入后页面无渲染(一直找了好久，页面没报错，完全没头绪！)

最新推荐文章于 2025-05-16 16:09:52 发布
原创 最新推荐文章于 2025-05-16 16:09:52 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #组件 #vuejs

在开发新需求时，创建分支并复制通用页面后遇到页面无法渲染的问题。经过排查，问题出在import语句上，删除了组件但未移除components引用，导致内部错误，虽无页面报错，但影响了页面展示。解决此类问题需注意代码同步更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

事件的起因：

在新年的某一天，一个新需求要开发。当我建完分支随便复制了一个通用的页面，路由页面的权限都配置好了，但是页面一直不渲染！整整纠结了半天时间，最后和同事一起去确认排除页面写法问题，最终解决了该次事故！！！

前言

目前百度搜索啥的，搜到的基本都是因为名称大小写或者起名字语义化问题引起的，对应的解决方案基本就是：修改导入变量名或首字母改为大写！！！

但是本人遇到的不是那个问题，很奇葩很难发现的一个错误！内部错误，不显示在页面的报错！

解决方案的展示

下图是导入后展示的样子，组件未展示出来！！！

 问题点展示

页面后面操作时import方法删除了一个组件，但是components引入未删除，导致vue项目内部报错，未外显到页面上，这种情况下次注意下哈！

我们一起进步！！！

 

简介：基于 OpenTiny 组件库的 rendereless 无渲染组件架构
通达的博客
03-09 945
在 HAE 自研阶段，我们实现的数据双向绑定、面向对象的 JS 库、配置式开发的注册表等特性，随着前端技术的高速发展现在已经失去存在的意义，但是在 AUI 阶段探索的新思路新架构，经过大量的业务落地验证，再次推动前端领域的创新。TinyVue 继承了 HAE、AUI，OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。
Vue中的无渲染组件
W3cplus
03-30 1656
特别声明：此篇文章内容来源于@Adam Wathan的《Renderless Components in Vue.js》一文。不知道您是否以前有过在第三方组件库中提取过组件的经历，在提取组件的过程中发现需要做一些小的调整，而且也避不开提取整个包。比如像自定义的下拉框，日历或自完匹配等组件，而这些组件可能非常的复杂，需要处理许多意想不到的边界情况。有很多库在处理这些复杂边界情况做得很好，但是它们通常
vue动态组件使用依赖注入时发现组件没有被渲染
梁诗傑的博客
03-01 805
在处理过程中，本着不该配置文件的想法，换一种思路，也达到 响应式数据 依赖注入的要求。方法如下：不再注入一个普通变量，而是注入一个函数，这样，也能够实时拿到变化的最新值。，但是在加载动态组件的时候出现的问题，没有渲染。由于疏忽，没有按 配置要求 添加配置。安装官方要求，我引入代码。
Vue-Office项目中使用@vue-office/docx组件预览空白问题解析
最新发布
gitblog_07674的博客
05-16 1082
Vue-Office项目中使用@vue-office/docx组件预览空白问题解析 在使用Vue-Office项目的@vue-office/docx组件时，部分开发者遇到了文档预览空白的问题，并伴随浏览器控制台报错。本文将深入分析这一问题的原因及解决方案。 问题现象 当开发者尝试使用@vue-office/docx组件预览Word文档时，页面显示空白，浏览器控制台抛出错误。具体表现为： 组件无法...
[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别
YUSIR 完美CODING世界
02-24 608
[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.
VUE+Element首次打开Dialog加载子组件数据未渲染（不显示）
学点的CSDN博客
11-16 8719
VUE+Element第一次打开弹窗组件时，父组件传给子组件的数据在视图中未显示，第二次以后再打开就可以显示（已解决）
Webpak4.0+vue从零构建基础配置，环境区分，插件配置
Mini_小仙女的博客
11-27 866
基本目录为什么要用webpack?为什么要用webpack?如何配置和使用webpack？基础配置环境区分插件如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 为...
干货 | React Hook的实现原理和最佳实践
携程技术中心
07-18 2430
作者简介何鸣明，携程境外专车研发部前端工程师，主要负责境外打车、包车业务。喜欢交流分享。一、在谈 react hook 之前React的组件化给前端开发带来了前所未有的体...
综合一
刘群智的博客
07-27 4427
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： <div id="outer">   <div id="sidebar" style="height:240px;">固定宽度区</div>   <d
[译] 无渲染组件
weixin_33859665的博客
07-30 182
原文地址：Headless User Interface Components 原文作者：Merrick Christensen 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Starrier 校对者：xunge0613、Moonliujk 无头用户界面组件是一种不提供任何接口而提供最大视觉灵活性的组件。“等等，你是在提倡没有用户界面的用户界面...
vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
weixin_39834767的博客
12-20 5113
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
构建无渲染的 Vue 组件（函数式组件）
weixin_40398599的博客
09-23 1200
构建无渲染的 Vue 组件（函数式组件） 关于 Vue 有一种特别流行的说法：当 React 和 Angular 在一起并生了个孩子，那就是 Vue。我一直都有这种感觉。由于 Vue 的学习曲线很小，所以有那么多人喜欢它并不奇怪。Vue 一直试图让开发人员尽可能多地控制组件及其实现，这就引出了今天的话题。 术语renderless components是指不渲染任何内容的组件。本文中，我们...
Vue中的renderless 非渲染组件
bug收集
06-02 1131
面试中遇到的一个问题，什么是 renderless ？ renderless即非渲染组件开发的思想， 请看下文 01 什么是 render 函数 众所周知，在工程中，我们会在.vue文件中定义<template>、<script>和<style>三种tag，分别盛放组件html、javascript和css。 <template><button class="mood"> {{ state ? ...
vue中出现组件不渲染更新的问题，方法总结
qq_40407998的博客
07-31 3519
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: 解决页面数据不渲染/更新问题
热门推荐
snow的博客
12-02 1万+
直接赋值不能渲染，相当于每次都是用了新组件，解决了渲染问题在data里定义key原理：本质是对 JavaScript 执行原理EventLoop的一种应用。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。
Vue组件不渲染的奇葩问题
m0_59183852的博客
12-05 233
最近重新捡起了Vue这个高级的东西，学习过程中碰到了一个很奇怪的问题，在此值得记录一下。建议以后多用完整的闭合形式，可能我react用久了吧。后来经过盘查喝继续学习，找到了原因。
vue在动态html中渲染组件,Vue中的无渲染组件
weixin_32557927的博客
06-08 1178
不知道您是否以前有过在第三方组件库中提取过组件的经历，在提取组件的过程中发现需要做一些小的调整，而且也避不开提取整个包。比如像自定义的下拉框，日历或自完匹配等组件，而这些组件可能非常的复杂，需要处理许多意想不到的边界情况。有很多库在处理这些复杂边界情况做得很好，但是它们通常都有一个破坏性的缺点：很难或不可能定制它们的外观。比如标签输入控件(Tag input控件)：这个组件有一些有趣的特性：它不会...
什么是 ”无渲染组件“ ？
LuckyWinty的博客
05-15 93
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群无头用户界面组件是一种不提供任何接口而提供最大视觉灵活性的组件。“等等，你是在提倡没有用户界面的用户界面模式么？”是的，这正是我所提倡的。掷硬币组件假设你现在需要实现一个掷硬币的功能，当组件渲染时模拟一次掷硬币！一半的时间组件应该渲染 “正面”，一半的时间应该渲染 “反面”。你对你的产品经理说 “这需要多年的研究！” 然后你继续工作。con...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

绝世唐门三哥

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

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

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

打赏作者

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

抵扣说明：

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

余额充值