Vue 声明了子组件却无法正常显示子组件内容，没有任何报错。

最新推荐文章于 2024-05-11 00:32:32 发布
最新推荐文章于 2024-05-11 00:32:32 发布
阅读量2.4k 收藏
点赞数
分类专栏： 笔记 Vue踩坑日记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QIingBo/article/details/113849497
版权

在做demo 的时候，遇到 声明了子组并引用了。内容却无法正常加载出来。
在这里插入图片描述
在这里插入图片描述
百度给解释：需要先 new Vue 一个实例。这是其中之一，只不过我的问题不是出在这。
我的错误：在父组件使用了 v-text 指令 导致组件内容就被 v-text 指向的变量。在使用父子组件的时候不能在父组件使用 v-text 和 v-html 。

QIingBo
关注
专栏目录
子组件无法正常显示
chen__cheng的博客
07-13 1813
错误形式：父组件中引用了子组件，但是子组件没有正常显示 编码环境：在html页面中通过cdn的方式进行引入，采用vue基础语法进行编写，父组件与子组件在同一个页面中编码，同时子组件的注册也在当前页面 错误代码： <div id="app"> // 使用子组件 <to-item v-bind:todo="message"></to-item> </div> // 引入vue <script src="https://cdn.js..
关于Vue项目不报错但是不显示组件的问题(原因之一)
热门推荐
朽木自雕的博客
08-11 2万+
在解决这个问题之前(不管是不是跟我原因一样)请先安装vue-devtools,安装方法：传送门 首先是项目代码： <template> <div>首页区域</div> </template> <script> </script> <style lang="scss" scoped> </...
Vue---开发过程中，组件引入后页面无渲染(一直找了好久，页面没报错，完全没头绪！)
COCOLI_BK的博客
02-08 1149
事件的起因：在新年的某一天，一个新需求要开发。当我建完分支随便复制了一个通用的页面，路由页面的权限都配置好了，但是页面一直不渲染！整整纠结了半天时间，最后和同事一起去确认排除页面写法问题，最终解决了该次事故！！！前言目前百度搜索啥的，搜到的基本都是因为名称大小写或者起名字语义化问题引起的，对应的解决方案基本就是：修改导入变量名或首字母改为大写！！！但是本人遇到的不是那个问题，很奇葩很难发现的一个错误！内部错误，不显示在页面的报错！
vue3 component is 不显示
MAIMIHO的博客
11-02 798
通过名称传递必须先对其进行注册, 将组件本身传递给。而不是其名称，则不需要注册。
vue3自定义组件无法显示问题
m0_73997007的博客
09-29 2814
vue3自定义组件无法显示问题
日常记录vue3按需引入element-plus的组件而样式不显示的问题
huadu002193的博客
05-11 906
我是在package.json中直接改然后在控制台执行pnpm install。这时将unplugin-vue-components改为0.26.0就行了。在网上搜索了很多方法未解决，最后突然想到会不会是插件版本问题；我安装时unplugin-auto-import@0.17.5。ELMassage是eslint检测未引入报错，不必理会；虽然没有出现el-button样式，但点击绑定生效；后，运用官方组件仍然显示不出一些样式。npm,yarn语法应该也一样。结果还真的就是版本引起的；插件默认安装最新版；
解决vue 引入子组件报错的问题
10-18
总结来说，解决Vue引入子组件报错的问题关键在于遵循Vue的组件命名规则，避免使用HTML保留标签作为组件ID。合理地命名和注册组件，不仅可以避免潜在的冲突，还能提高代码的可读性和可维护性。在实际开发中，理解并...
解决vue 子组件修改父组件传来的props值报错问题
10-16
以上就是在Vue中解决子组件修改父组件props值报错问题的方法。通过使用计算属性、数据或事件，我们可以保持数据流动的单向性，确保组件间的通信清晰且易于维护。记住，良好的组件设计应当遵循Vue的最佳实践，这样...
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
在Vue.js开发过程中，有时会遇到组件没有显示出来的情况，虽然代码没有报错，但预期应该显示的组件却消失无踪。这种情况可能是由于多种因素引起的，以下是一些常见的解决策略和注意事项，帮助开发者排查和修复这类...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
这个问题的出现会影响组件间的正常通信，导致应用的某个功能无法按预期工作。 为了帮助大家解决这一问题，以下将详细阐述Vue.js中父组件$on监听子组件$emit事件的正确实现方式。 首先，我们来了解一下Vue.js中事件...
vue组件引用另一个组件出现组件不显示的问题
夜听雪的博客
11-14 1万+
下载的一个vue构建的后台管理系统，导航栏是一个侧边栏，想在头部里面加一个导航 先是导入要使用的组件 import Hamburger from '@/components/Hamburger' import Nav from '@/components/Nav/index.vue' //自己新建的 然后在 components 里面写入该组件 components: { Ha...
vue3中组件不显示的解决方法（已解决）
m0_54568435的博客
03-13 3164
方法来动态加载 Element Plus 的组件，以避免编译时无法解析的问题。这样可以确保在运行时正确加载 Element Plus 的组件。方法来动态加载 Element Plus 的组件，可以在运行时正确解析组件，避免编译时的错误。选项1选项2选项3
【VUE】父组件点击后子组件页面内容不更新 :key=“timer“
SZnAl的博客
05-30 4145
父组件点击后，子组件页面内容不更新（参数已经传递，子组件并没有对新参数进行调用） 解决方法： 在父组件中： 需要更新的子组件中添加： <business-form-dialog-template @submit="receiveOrder"> <order-apply-form :key="timer"/> //添加key </business-form-dialog-template> 父组件的点击方法中添加： han
vue3 遇到的坑vant组件按需引入 和 Toast组件不显示，
m0_70799902的博客
04-22 1145
但是单独引入Toast就可以。main.js文件中需要映入。
vue3 setup 语法糖显示未引用变量问题
meiyoujuedui的博客
11-28 622
vue3 setup 语法糖显示未引用变量问题
Vue创建component组件引用后不显示问题
weixin_51540252的博客
08-17 2986
Vue创建component组件引用后不显示问题
react、vue中的key的作用
Web_South_Bay的博客
09-06 392
一、虚拟DOM中key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会跟据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 二、对比规则： 1.旧虚拟DOM中找到了与新虚拟DOM相同的key： 1）若虚拟DOM中内容没变，直接使用之前的真实DOM。 2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 2.旧虚拟DOM...
Vue3导入Elementplus时组件无法加载的情况
weixin_61186473的博客
03-25 2437
上面一种写法中app的声明是ElementPlus注册之后才创建的，也就是说Element注册被调用时，注册到了一个还没有产生，并不存在的“app”上，这样的注册显然是空的无效的。这个案例提供的思考应该不仅限于此，可以说，Vue3 CLI自带的main.js虽然简化了app全局注册的写法，但是在需要注册其他绑定app的依赖时，都需要采用后者的写法。经排错，是由于main.js文件中完整导入时，自作主张将Vue3自带的生成段和ElementPlus提供的部分注册段结合了。
vue组件引用另一个组件不显示的问题的一个小坑
hmbbpdx的博客
12-06 786
今天写一个左侧布局 用其他组件引用但是引用的时候不显示看看代码 我感觉应该是大小写错误 所以把SideMenu改成了sideMenu 然后就成功了！！！！！再试一次SideMenu是创建完组件自动敲代码自动提示出来的 首字母大写我那个组件首字母是小写的 改回来就行了 又是一个坑。。。
vue3子组件直接修改父组件值不报错
最新发布
10-16
在 Vue3 中，如果子组件想要直接修改父组件的数据，通常需要通过 `ref` 或者 `$parent` 关联来做到数据穿透。因为 Vue 的单向数据流原则（Parent to Child），默认情况下子组件是无法直接修改父组件的属性的，这防止了意外的副作用。 1. 使用 `ref` 对象：在父组件中创建一个 ref 并传给子组件，然后在子组件里可以直接读取和更新这个 ref。例如： ```js // 父组件 export default { setup() { const value = ref(0); return { value }; } }; // 子组件 <template> <button @click="increaseValue">增加</button> </template> <script> import { onMounted } from 'vue'; export default { methods: { increaseValue() { this.$parent.value++; // 直接修改父组件的 ref 值 }, }, }; </script> ``` 2. 使用 `$parent`：在 Vue 2.x 中可以使用 `$parent` 访问上一层级的实例，但在 Vue 3 中推荐使用 Composition API，因此 `$parent` 不再常用，除非是在一些特殊场景下作为过渡期。 由于这样的操作可能会导致状态管理混乱，Vue 提倡使用 props、自定义事件（$emit/$on）或者 Vuex、Pinia 等更明确的方式来维护父子组件间的通信。如果这样做不报错，可能是暂时未触发变更检测规则，但长期来看不是最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值