(vue3)动态组件

这篇具有很好参考价值的文章主要介绍了(vue3)动态组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是动态组件 就是:让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

在挂载点使用component标签,然后使用v-bind:is=”组件 ,通过is 切换 A B 组件

<template>
    <div style="display: flex;">
       <div @click="switchCom(item,index)" 
            :class="[active == index ? 'active':'']" 
            class="tabs" v-for="(item,index) in data" :key="index">
          <div>{{ item.name }}</div>
       </div>
    </div>
    <!-- 内置组件 -->
    <component :is="comId"></component>
</template>
<script setup lang='ts'>
import { ref, reactive, shallowRef, markRaw } from 'vue'
import AP from '@/components/expame/AP.vue'
import BP from '@/components/expame/BP.vue'
import CP from '@/components/expame/CP.vue'

const comId = shallowRef(AP) // 切换组件
const active = ref(0)  // 点击tab动态样式
const data = reactive([  
   {
      name:'A组件',
      com:markRaw(AP)
   },
   {
      name:'B组件',
      com:markRaw(BP)
   },
   {
      name:'C组件',
      com:markRaw(CP)
   }
])
// 点击事件
const switchCom = (item , index) => {
   comId.value = item.com
   active.value = index
}
</script>

使用场景

tab切换 居多

注意事项 

1.在Vue2 的时候is 是通过组件名称切换的 在Vue3 setup 是通过组件实例切换的

2.如果你把组件实例放到Reactive Vue会给你一个警告runtime-core.esm-bundler.js:38 [Vue warn]: 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`. 
Component that was made reactive: 

这是因为reactive 会进行proxy 代理 而我们组件代理之后毫无用处 节省性能开销 推荐我们使用shallowRef 或者  shallowRef 跳过proxy 代理
所以上面要使用shallowRef , shallowRef 包裹组件
文章来源地址https://www.toymoban.com/news/detail-644675.html

到了这里,关于(vue3)动态组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3动态组件

     1 、 可以通过  shallowRef 把  可以把组件进行包裹 为什么用shallowRef      如果传入基本数据类型,那么 shallowRef 与 ref 的作用基本没有什么区别,也就是浅层的 ref 的内部值将会原样的存储和暴露,并不会被深层递归地转为响应式 当我们使用ref   会有提醒建议使用  shallowRef  

    2024年02月12日
    浏览(37)
  • vue3动态加载组件

    当 is 是字符串,它既可以是 HTML 标签名也可以是组件的注册名。 或者,is 也可以直接绑定到组件的定义。 内置组件都可以传递给 is,但是如果想通过名称传递则必须先对其进行注册。 如果将组件本身传递给 is 而不是其名称,则不需要注册。 vue官方文档-component内置动态组件

    2024年02月13日
    浏览(38)
  • vue3动态组件组件shallowRef包裹问题

    在vue3做tabs切换功能的时候,如果导入的组件不适用shallowRef包裹会显示下面的警告: 根据提示代码修改如下: 就能解决上面的问题。

    2024年02月22日
    浏览(58)
  • VITE+VUE3动态导入组件

    通常的动态组件导入方式   vue中又是时候我们会使用到动态组件导入,比如路由组件的动态导入,一般类似路由组件的动态导入的方式: ()=import(path); ()=defineAsyncComponent(()=import(path)) vite中使用的错误 但是这写方式进行动态导入组件的时候在vite+vue3项目下都是不行的,开发

    2024年02月14日
    浏览(43)
  • 前端常用 Vue3 项目组件大全

    Vue.js 是一种流行的 JavaScript 前端框架,它简化了构建交互式的用户界面的过程。Vue3 是 Vue.js 的最新版本,引入了许多新的特性和改进。在 Vue3 中,组件是构建应用程序的核心部分,它们可以重用、组合和嵌套。下面是一些前端开发中常用的 Vue3 项目组件。 1、Vue Router: Vue

    2024年02月10日
    浏览(55)
  • VUE3+vite项目中动态引入组件和异步组件

    1. 把项目中所有vue文件注册成异步组件。 2. 获取组件 在setup函数获取组件 3. 参考如下 Glob 导入 Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块: 以上将会被转译为下面的样子: 你可以遍历 modules 对象的 key 值来访问相应的模块: 匹配到的文件默认是懒加载的

    2024年02月10日
    浏览(105)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • vue3拖拽布局+动态组件+自适应布局

    1.拖拽布局插件 Vue Grid Layout -️ 适用Vue.js的栅格布局系统 可拖动和可调整大小栅格布局的Vue组件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件库,并执行命令npm install  \\\"vue-grid-layout\\\": \\\"^3.0.0-beta1\\\",  2.拖拽页面代码 3.图表子组件代码

    2024年02月11日
    浏览(42)
  • 前端学习笔记(14)-Vue3组件传参

    1.props(父组件传递给子组件) 1.1 实现 如果你没有使用 script setup,props 必须以 props 选项的方式声明,props 对象会作为 setup() 函数的第一个参数被传入: 在子组件中: 在父组件中: 一个组件可以有任意多的 props,默认情况下,所有 prop 都接受任意类型的值。 这种情况下,我

    2024年01月21日
    浏览(53)
  • Vue3前端开发,父组件给子组件传递数据练习

    Vue3前端开发,父组件给子组件传递数据练习!还是借用刚刚的组件模板,来开展父传子的练习。 依旧是需要借助官方提供的宏函数来接收数据。defineProps. 这个是父组件里面的内容。我们自定义了2个变量,一个是车厘子单价。一个是纯文本。 一个数字类型,一个文本类型。都

    2024年01月22日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包