vue组件的循环引用

已于 2022-05-18 15:34:45 修改
阅读量3k 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
于 2022-05-18 15:13:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujianwonton/article/details/124842123
版权

今天项目中遇到个场景，简单概括为：A组件导入了B组件，B组件导入了C组件，C组件又导入了B组件，会报出组件未正确注册的错误。
官方文档已有解释，B、C组件互为对方的子组件和父组件，互相依赖，不知道如何不经过其中一个组件而完全解析出另一个组件。参见 组件之间的循环引用
解决方法有3种：

  1. 在B组件中需要在beforeCreate中注册C组件：
  beforeCreate() {
   
    this.$options.components.bonusSettlementSecondStep = (
最低0.47元/天 解锁文章
Hell to pay
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js组件间的循环引用方法示例
11-29
什么是组件： 众所周知组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。下面话不多说了，来一起看看本文的正文内容。 引言 写了大大小小不少基于vue的项目，但是基本没用到过组件循环引用的知识。 为了查缺补漏，照着官方文档撸一个DEMO：组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1，启用项目后，将以下 js 文件和 vue 文件放置在相应的目录中运行。 main.js import Vue from 'v
vue如何解决循环引用组件报错的问题
10-17
主要介绍了vue如何解决循环引用组件报错的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3 循环动态给渲染出来的组件添加ref(组件操作引用)实现后续对组件的操作
最新发布
oMangGuoBuDing1的专栏
05-31 454
template>{{ i }}</div></div></script>
【VUE前端组件循环引入，控制台一直提示找不到组件问题】
weixin_43946446的博客
04-17 230
VUE前端组件循环引入，控制台一直提示找不到组件问题
vue 组件之间的循环引用
yxm_136452789的博客
02-14 3084
假如有A,B两个组件，渲染A组件的时候，A组件中引入了B组件显示，在渲染B组件的时候又引入了A组件，会导致控制台一直报是否正确注册了组件的错误。组件循环嵌套引发的问题。官方文档也有说明，组件循环引用 解决办法：异步导入（在B组件里面异步导入A组件）， 1，在components注册时异步 components: { VueDragPrintItem: () => import('../index.vue') }, 2，在beforeCreate生命周期里面 beforeCreate:
vue组件之间的循环引用
qq_44165941的博客
05-17 1642
项目场景： 点击表格中的一个链接，打开数据详情的drawer，详情页组件同时使用表格这个组件。 问题描述 机构管理页面包含机构型号/设备号/当前机构/租购类型/配件信息等 点击当前机构，跳转到机构详情页，机构详情页里里包含基本信息/功能权限/模式管理/应用管理/设备管理 设备管理就是机构管理页面，从而造成组件的循环调用 原因分析：— 组件的循环嵌套，对应vue官方的处理边界情况-组件之间的循环引用 解决方案： 方案一：复制一份机构管理页面组件到详情页组件中 方案二：异步调用组件 component
Vue-循环引用
Mikon_0703
11-25 830
一、递归组件 组件在自身的模板中调用自身的，通过name选项 例如：name：‘unique-name-of-my-component’ 使用Vue.component注册全局组件时，全局的id会自动设置为该组件的name选项 Vue.component('unique-name-of-my-component', { // ... }) 二、组件之间的循环引用 组件在渲染树中护卫对方的后代/祖先——一个悖论；先把两个组件设为A和B，模块系统发现需要A，但是A依赖于B，B又依赖于A，如此往
vue2.0处理组件循环引用
u012270755的专栏
04-18 449
vue组件循环引用
vue 解决循环引用组件报错的问题
10-18
在Vue开发过程中，循环引用组件可能会导致运行时错误，这是因为Vue在解析模板时，如果组件未被正确注册，就会抛出“Unknown custom element”错误。本文将深入探讨Vue中的循环引用问题及其解决方案。 首先，我们要...
vue3 + vite Cannot access ‘xxx‘ before initialization 组件热更新失败，es模块循环引用问题
热门推荐
HHH917的博客
12-26 1万+
pinia 下 modelCache.ts 文件使用了router 并Model组件中 引入了modelCache.ts 该文件 这样导致es模块循环 vite热更新失败。本人 在 pinia stores 文件中使用了 router ，而main.ts 已经引入过router。pinia 下 modelCache.ts 文件 router 引入方式改为 函数引入。因为 useRouter() 要在setup下使用。pinia 下 modelCache.ts 文件。
vue-循环引用感想
qq_45030898的博客
01-18 638
vue-循环引用感想
vue组件循环依赖
weixin_48811255的博客
05-11 330
在这种情况下，虽然它们循环引用，但只要它们不是在创建时就相互引用（例如在created或mounted钩子中），通常不会有问题。Vue的响应式系统会确保只有在实际需要时才渲染相关组件。2、解决方式：使用异步注册。
vue的v-for循环和动态组件
weixin_45023621的博客
06-30 5897
v-for循环 v-for可以遍历数组 在标签上添加v-for属性，但必须绑定key值 <template> <div> <label>v-for循环</label><br /> <label v-for="(item,index) in arr" v-bind:key="index">{{item}}<br/></label> </div> </template>
vue 字符串拼接_Vue 中必会的 ES6 知识点
weixin_39637924的博客
11-25 963
目录let / const 解构赋值箭头函数模板字符串async / await （ES 2017）模块导入 / 导出以上排名不分先后~都！很！重！要！let / const在 let 和 const 出现之前，js 中定义变量的关键字只有 var，不过 var 有一个缺点，没有块级作用域。比如下面这段代码：我们运行一下，控制台的输出结果会是这样：我们可以看到，在 for 循环中定义的变量 i，我...
vue组件间的循环引用
weixin_41597344的博客
03-13 2192
起因 Vue出现报错： Unknown custom element: < xxxxx > - did you register the component correctly? For recursive components, make sure to provide the “name” option. 出现这个报错，我们的第一反应是 import了吗？components里面添...
vue组件递归、组件相互依赖问题解决
細水、長流√的专栏
09-08 196
【代码】vue组件递归、组件相互依赖问题解决。
vue的响应式原理：依赖追踪
sdgfafg_25的博客
12-06 984
计算属性：只有计算属性的依赖发生变化时，它才会在重新渲染时重新计算。前者会把计算属性标记为“待更新”，重新计算则会等到下一次被使用（比如重新渲染）时才会进行。表达式、methods中的方法、全局的自定义函数：每次重新渲染都会重新计算，因为它们的值不会被缓存，所以要尽可能多的使用计算属性。
Vue 中的依赖注入，特别是 Provide 和 Inject，它们的原理、用法和示例
百度一下 猎人社区
05-23 1370
在软件开发中，依赖是指一个类或对象需要使用另一个类或对象来完成某些功能。依赖注入（Dependency Injection）就是一种设计思想，通过将依赖关系从程序代码中抽离出来，然后通过外部容器来注入依赖，从而实现解耦的目的。在 Vue 中，组件之间可以通过 props 传递数据和方法，这是一种显式的依赖注入方式，但是当需要传递的数据或方法比较多时，会变得比较麻烦。此时，我们可以使用 Vue 的依赖注入机制，实现隐式的依赖注入。
打包时循环依赖（circular dependency）警告
qq_51574759的博客
10-28 1723
我在打包构建我的vue3项目的时候，有这么一个警告信息：Export "useProjectStore" of module "src/store/modules/user.js" was reexported through module "src/store/index.js" while both modules are dependencies of each other and will end up in different chunks by current Rollup setting
vue3 循环引用子组件怎么给父组件传值
11-24
为了在Vue3中循环引用子组件并将数据传递给父组件，可以使用自定义事件和v-model指令。具体步骤如下： 1.在子组件中定义一个自定义事件，用于向父组件传递数据。例如，我们可以定义一个名为“update:value”的事件，用于更新父组件中的值。 2.在子组件中使用v-model指令将子组件的值绑定到父组件中的值。例如，我们可以将子组件的值绑定到父组件中的“counter”变量上。 3.在子组件中触发自定义事件，并将需要传递给父组件的数据作为参数传递。例如，我们可以在子组件中触发“update:value”事件，并将子组件的值作为参数传递。 4.在父组件中注册子组件，并绑定自定义事件。例如，我们可以在父组件中注册子组件“ButtonCounter”，并绑定“update:value”事件到一个方法“updateCounter”上。 5.在父组件中实现“updateCounter”方法，用于接收子组件传递过来的数据，并更新父组件中的值。 下面是一个示例代码，演示如何在Vue3中循环引用子组件并将数据传递给父组件： 子组件代码： ```vue template> <button @click="increment">{{ count }}</button> </template> <script> import { defineEmits } from 'vue'; export default { emits: ['update:value'], props: { value: { type: Number, default: 0 } }, setup(props, { emit }) { const count = ref(props.value); const increment = () => { count.value++; emit('update:value', count.value); }; return { count, increment }; } }; </script> ``` 父组件代码： ```vue <template> <div> <button-counter v-for="counter in counters" :key="counter.id" v-model="counter.value" @update:value="updateCounter(counter.id, $event)" /> </div> </template> <script> import ButtonCounter from './ButtonCounter.vue'; import { ref } from 'vue'; export default { components: { ButtonCounter }, setup() { const counters = ref([ { id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 } ]); const updateCounter = (id, value) => { const counter = counters.value.find(c => c.id === id); counter.value = value; }; return { counters, updateCounter }; } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值