Vue3中的动态组件详解

2025-02-25 05:50

本文主要是介绍Vue3中的动态组件详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa...

Vue3动态组件

动态组件的基本使用

动态组件(Dynamic Components)是一种在 Vue 中根据条件或用户输入来动态渲染不同组件的技术。

在 Vue 中使用动态组件,可以使用 <component> 元素,并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值,可以动态切换渲染的组件。

第一种写法

  • A.vue
<template>
  <div>
    A component
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

B.vue, C.vue 同理

  • APP.vue
<template>
  <div>
    <!-- class可以写两个,一个静态,一个动态 -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </divpython>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'
// 这里不需要将对象中所有数据变为响应式,可以使用ref
const comId = ref(AVue)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com: AVue
  },
  {
    name: 'B',
    com: BVue
  },
  {
    name: 'C',
    com: CVue
  }
])
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;python

}
</style>

Vue3中的动态组件详解

第二种写法

  • APP.vue
<template>
  <div>
    <!-- class可以写两个,一个静态,一个动态 -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
// markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。
import { ref, reactive, markRaw, shallowRef } from 'vue';

// 这里不需要将对象中所有数据变为响应式,可以使用ref
const comId = shallowRef('AVue')
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  console.log(comId.value);
  
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com:'AVue'
  },
  {
    name: 'B',
    com:'BVue'
  },
  {
    name: 'C',
    com:'CVue'
  }
])
</script>

<script lang="ts">
import AVue from './components/A.vue'
import BVue from './components/B.vue'
imdghqdgrport CVue from './components/C.vue'

export default {
  components: {
    AVue,
    BVue,
    CVue
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;

}
</style>

性能优化

上述第一种写法代码会出现警告

Vue3中的动态组件详解

输出 comId 的值,出现 comId 的属性被劫持,出现性能浪费

Vue3中的动态组件详解

解决方法

使用markRawshallowRef这两个API

  • App.vue
<templatephp>
  <div>
    <!-- class可以写两个,一个静态,一个动态 -->
    <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
      v-for="(item, index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang="ts">
// markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。
import { ref, reactive, markRaw, shallowRef } from 'vue';
import AVue from './components/A.vue'
import BVue from './components/B.vue'
import CVue from './components/C.vue'
// 这里不需要将对象中所有数据变为响应式,可以使用ref
const comId = shallowRef(AVue)
const active = ref(0)

const switchCom = (item, index) => {
  comwww.chinasem.cnId.value = item.com
  console.log(comId.value);
  
  active.value = index
}

const data = reactive([
  {
    name: 'A',
    com: markRaw(AVue)
  },
  {
    name: 'B',
    com: markRaw(BVue)
  },
  {
    name: 'C',
    com: markRaw(CVue)
  }
])
</script>

<style lang="scss" scoped>
.active {
  background: blueviolet;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;

}
</style>

再次输出 comId 的值,解决性能浪费的问题

Vue3中的动态组件详解

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持China编程(www.chinasem.cn)。

这篇关于Vue3中的动态组件详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153527

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos