首页 > 其他分享 >Vue动态组件

Vue动态组件

时间:2024-02-23 12:33:07浏览次数:28  
标签:Vue markRaw 实例 组件 动态 com

components简介

在不同组件之间进行动态切换
Vue的元素加一个特殊的【is】属性来实现
多个组件使用同一个挂载点,之后动态在各个组件之间切换

内置组件keep-alive

keep-alive 动态组件默认每次切换都会销毁组件并重新创建,这样会影像性能
使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染

<!-- 使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染,默认每次切换都会销毁然后重新创建 --> 
<keep-alive>
  <component :is='flag'></component>
</keep-alive>

使用案例 https://zhuanlan.zhihu.com/p/451433950

什么是动态组件?

组件是可复用的Vue实例,组件也是Vue实例
但组件和Vue实例存在差别:

  1. 组件没有挂在目标el
  2. 组件是跟随Vue实例的,所有的Vue实例的挂载点也是组件的挂载点
  3. 组件中data不能是对象,因为Vue实例是单例模式,只有一个
    组件有多个,多个属性调用对象会指向同一地址,但是方法每new一个实例
    就会开辟一块新的内存空间

所以组件中的data不能是对象,必须是方法 ★★★

动态组件就是动态变化的组件和动态样式一样
动态样式绑定 -> [:style]
动态组件绑定 -> [:is]

动态组件的具体实现


<template>
  <div style="display: flex">
    <div v-for="(item, index) in data" :key="index"
         @click="switchCom(item, index)"
         :class="[active === index ? 'active' : '']"
         class="tabs"
    >
      <div>{{item.name}}</div>
    </div>
    <component :is="comId"></component>
  </div>
</template>


<script setup>
import {ref, reactive, shallowRef, markRaw} from "vue";

import ACom from './components/A.vue'
import BCom from './components/B.vue'
import CCom from './components/C.vue'

const comId = shallowRef(ACom)
const active = ref(0)

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

// markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。
const data = reactive([
  {
    name: 'A',
    com: markRaw(ACom)
  },
  {
    name: 'B',
    com: markRaw(BCom)
  },
  {
    name: 'C',
    com: markRaw(CCom)
  }
])
</script>


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

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
</style>

标签:Vue,markRaw,实例,组件,动态,com
From: https://www.cnblogs.com/openmind-ink/p/18029245

相关文章

  • day41 动态规划part3 代码随想录算法训练营 96. 不同的二叉搜索树
    题目:96.不同的二叉搜索树我的感悟:这题,考的概率不大,听一遍,过一遍就行。理解难点:二叉搜索树定义为什么是累加的听课笔记:代码示例:classSolution:defnumTrees(self,n:int)->int:dp=[0]*(n+1)#创建一个长度为n+1的数组,初始化为0d......
  • 遇到Failed to get response from https://registry.npm.taobao.org/vue-cli-version-
    1.问题在启动vueui时,总是遇到报错,如下图:2.解决参考:vuecli创建项目报错:Failedtogetresponsefrom/vue-cli-version-marker找到你的.vuerc文件:C:\Users\trmbh\.vuerc,这里根据自己的用户名更改然后改为{"useTaobaoRegistry":false,"packageManager":"npm"}第......
  • day40 动态规划part3 代码随想录算法训练营 343. 整数拆分
    题目:343.整数拆分我的感悟:题目很难,但我动力十足!!理解难点:如何拆分为什么要保留dp[i]听课笔记:代码示例:classSolution:defintegerBreak(self,n:int)->int:#思路:#dp[i]是到目前为止能拆分取的最大值#dp[i]可以拆成j*(集合)......
  • vue3 ref 获取单个Dom及多个Dom
    获取单个Dom<inputtype="text"ref="inputRef"/>setup(){constinputRef=ref(null)onMounted(()=>{console.log(inputRef.value);})}获取多个Dom<divv-for="(item,index)instate.list":key=&quo......
  • vue3+vite 移动端适配postcss-pxtorem插件
    1、安装插件npmipostcss-pxtorem-D2、与package.json同级目录创建postcss.config.js文件module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1",......
  • ssts-hospital-web-master项目实战记录十:master-*.vue组件实现
    记录时间:2024-02-23Master_Basic.html<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head>  <title>主页</title>  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"......
  • ssts-hospital-web-master项目实战记录九:父组件App.vue给子组件main-page*.vue传值ter
    记录时间:2024-02-23一、App.vue详见:App.vue组件实现 【使用“文心一言”提取组件传值逻辑说明和代码】在Vue3中,组件传值通常涉及到props、emits、slots和组件的引用。在提供的代码中,主要关注点是动态组件的渲染和通过props传递数据。下面是对组件传值逻辑的说明和代码......
  • ssts-hospital-web-master项目实战记录八:App.vue组件实现
    记录时间:2024-02-23App.vue<scriptsetuplang="ts">import{defineComponent,ref,computed,onMounted,onUnmounted}from'vue'importMainPage1from'@/views/main-page/main-page1.vue'importMainPage2from'@/views......
  • 玩转SpringBoot:动态排除Starter配置,轻松部署
    引言在软件开发中,进行本地单元测试是一项常规且必要的任务。然而,在进行单元测试时,有时需要启动一些中间件服务,如Kafka、Elasticjob等。举例来说,我曾经遇到过一个问题:项目中使用了Redisson锁,但由于Redisson版本较低,在Mac环境下偶尔会报错#RedisConnectionException:Unabletoin......
  • C++动态内存分配探秘:new与malloc的关键差异及实例解析
     概述:在C++中,new和malloc均用于动态内存分配,但存在关键差异。new是C++运算符,能调用构造函数,返回类型明确;而malloc是C函数,仅分配内存,需手动类型转换。示例源代码生动演示了它们在构造函数调用和类型信息方面的不同。在C++中,new 和 malloc 都用于动态内存分配,但它们之间......