vue3笔记五(:is 动态组件)
1、注意事项
1、在Vue2 的时候is是通过组件名称切换的,在Vue3 setup是通过组件实例切换的
2、如果直接把组件实例放到reactive中代理,vue会发出警告。告知我们可以通过shallowRef 或者 markRaw 跳过proxy 代理。
因为组件实例进行响应式代理毫无意义,且浪费性能
2、:is 动态组件使用
子组件通过defineProps接受传参
<template>
<div class="content">
<div class="tabs" v-for="item in tabArr" :key="item.name" @click="tabChange(item.comName)">
{{ item.name }}
</div>
</div>
<component :is="currentCom"></component>
</template>
<script setup lang="ts">
import { ref, reactive, markRaw } from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
type Tab = {
name: string,
comName: any
}
// 从复杂数据类型中取出自己想要的几个属性
type Com = Pick<Tab, 'comName'>
const tabArr = reactive<Tab[]>([
{
name: 'A组件',
comName: markRaw(A)
},
{
name: 'B组件',
comName: markRaw(B)
},
{
name: 'C组件',
comName: markRaw(C)
},
])
const currentCom = ref<Com>(tabArr[0].comName)
const tabChange = (item: Com) => {
currentCom.value = item
}
</script>
<style>
.content {
display: flex;
padding: 20px;
height: 40px;
width: 100vw;
background: #f1f1f1;
}
.tabs {
width: 100px;
height: 40px;
background: #ffffff;
margin-right: 5px;
border: 1px solid #000;
}
</style>
原文链接:https://xiaoman.blog.csdn.net/article/details/122891279
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghggi
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13