当前位置: 首页 > news >正文

Vue——子组件中引入父组件

场景

因为特殊情况,开发中子组件又需要引入父组件,即子组件中再创建一个父组件的Vue实例。
比如一个展示组件Rack,内部有一个子组件RackDialog,然后RackDialog里又需要引入Rack组件

问题

使用常用的组件引入注册方式在RackDialog组件中引入Rack

import Rack from "Rack.vue"
export default {
	components: {
		Rack
	}
}

上面的方式运行时会报错组件未注册
在这里插入图片描述

解决方案

使用异步组件引入方式,即在RackDialog中使用如下方式引入Rack

export default {
	components: {
		Rack: () => import("@/components/Equipment/Rack/Rack.vue"),
	}
}

组件注册机制

Vue底层在进行组件注册时采用的是递归注册的形式,会将一个顶级组件的所有后代组件进行递归注册。
但是如果出现上述我们的情况——子组件中又引入了父组件,框架在递归注册时就可能陷入死循环。
所以Vue框架底层注册机制为了避免这种情况会在这种地方停止向下递归注册。所以出现了上述的组建为注册错误。
使用了按需引入后就会在RackDialog组件激活时才引入Rack组件,就不会出现这种未注册报错了。

优化

按需引入的方式还可以使用Vue的内置组件,即动态组件更优雅的引入
在这里插入图片描述

相关文章:

  • Vue——$attrs和$listeners
  • JS代码优化技巧——持续更新
  • 文字居于div底部的方式
  • Element——el-table设置单元格间距
  • Vue——插槽语法
  • Element——给el-table表头添加*
  • Element——tooltip无效和自定义内容
  • Vue——provide/inject的使用
  • windows注册表自定义添加右键菜单
  • 请求正常执行但是js语法报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
  • 使用图片做背景并设置充满固定屏幕
  • Vue——组件间数据访问方式与通信方式的一点总结思考
  • git-错误合并或错误删除文件并推送如何回退
  • 面试——常用的设计模式
  • VUE全局使用element-ui组件
  • 深入了解以太坊
  • [Vue CLI 3] 配置解析之 css.extract
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • Angular 2 DI - IoC DI - 1
  • conda常用的命令
  • const let
  • CSS实用技巧干货
  • PermissionScope Swift4 兼容问题
  • Python学习之路13-记分
  • vue总结
  • 批量截取pdf文件
  • 让你的分享飞起来——极光推出社会化分享组件
  • 三分钟教你同步 Visual Studio Code 设置
  • 少走弯路,给Java 1~5 年程序员的建议
  • 消息队列系列二(IOT中消息队列的应用)
  • 走向全栈之MongoDB的使用
  • ​configparser --- 配置文件解析器​
  • ​queue --- 一个同步的队列类​
  • #14vue3生成表单并跳转到外部地址的方式
  • (02)Hive SQL编译成MapReduce任务的过程
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (C语言)fread与fwrite详解
  • (poj1.3.2)1791(构造法模拟)
  • (八十八)VFL语言初步 - 实现布局
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (六)vue-router+UI组件库
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)Linux下编译安装log4cxx
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .bashrc在哪里,alias妙用
  • .bat批处理(六):替换字符串中匹配的子串
  • .net 8 发布了,试下微软最近强推的MAUI
  • .NET Core 和 .NET Framework 中的 MEF2
  • .skip() 和 .only() 的使用
  • /etc/fstab 只读无法修改的解决办法
  • @JsonFormat与@DateTimeFormat注解的使用
  • [ C++ ] STL priority_queue(优先级队列)使用及其底层模拟实现,容器适配器,deque(双端队列)原理了解
  • [ vulhub漏洞复现篇 ] ThinkPHP 5.0.23-Rce
  • [ 云计算 | AWS 实践 ] Java 如何重命名 Amazon S3 中的文件和文件夹
  • [100天算法】-二叉树剪枝(day 48)