Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

动态绑定组件

1、vue3动态组件展示使用的是官方提供的组件is方法：

<component :is="activeConmponent"></component>

2、当我们没有使用vue3的语法糖时，使用markRaw对组件进行包裹：

import Index "@/views/home/Index.vue";
import { ref, markRaw } from 'vue';
export default {conponents: {HomeIndex: markRaw(Index)},setup() {let activeConmponent = ref(HomeIndex);}
}

2、当我们使用vue3的语法糖时，使用shallowRef对组件进行声明：

import HomeIndex "@/views/home/Index.vue";
import { shallowRef } from 'vue';let activeConmponent = shallowRef(HomeIndex);

这样就可以解决vue3组件的警告了。

Vue3动态绑定组件警告处理相关推荐

vue3动态组件警告提示
Vue received a Component which was made a reactive object. This can lead to unnecessary performance ...
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
Vue3动态组件、缓存组件、分发组件
1.动态组件 Vue提供了全局的内置组件,这些组件主要完成的都是功能封装动态组件.缓存组件.分发组件多个组件使用同一个挂载点,然后动态地在他们之间切换,称为动态组件用法:<comp ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
VUE3祖孙组件传值调用方法
VUE3祖孙组件传值调用方法父子组件传参可以通过 props 和 emit 来实现,但是当组件的层次结构比较深时,props 和 emit 就太繁琐了.vue为了解决这个提出了 provide / ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
vue3父组件调用子组件的方法
东风vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option ...

Vue3动态绑定组件警告处理

动态绑定组件

Vue3动态绑定组件警告处理相关推荐

最新文章

热门文章