当前位置: 首页 > article >正文

Vue3 动态组件

component

在模板中使用 元素,通过 is 特性来动态切换组件:

<template>
  <div>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="1" />
      <el-tab-pane label="已通过" name="2" />
      <el-tab-pane label="未通过" name="3" />
      <el-tab-pane label="黑名单" name="4" />
    </el-tabs>
    <component
      ref="componentRef"
      :is="componentName"
      :activeName="activeName"
    ></component>
  </div>
</template>
<script setup>
import { ref, toRefs, computed, markRaw, nextTick } from "vue";
// 待提交
import PendingReview from "./pendingReview.vue";
// 已通过
import Passed from "./passed.vue";
// 未通过
import NotPass from "./notPass.vue";
// 黑名单
import Blacklist from "./blacklist.vue";
 
const componentRef = ref();
 
 
const activeName = ref("1");
const componentName = ref(markRaw(PendingReview));
 
const handleClick = (tab) => {
  if (tab.paneName === "1") {
    componentName.value = markRaw(PendingReview);
  } else if (tab.paneName === "2") {
    componentName.value = markRaw(Passed);
  } else if (tab.paneName === "3") {
    componentName.value = markRaw(NotPass);
  } else {
    componentName.value = markRaw(Blacklist);
  }
};
</script>
<style></style>

使用 v-if 或 v-show

<template>
  <div>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="待审核" name="1" />
      <el-tab-pane label="已通过" name="2" />
      <el-tab-pane label="未通过" name="3" />
      <el-tab-pane label="黑名单" name="4" />
    </el-tabs>
    <PendingReview v-if="activeName == '1'"/>
    <Passed v-if="activeName == '2'"/>
    <NotPass v-if="activeName == '3'"/>
    <Blacklist v-if="activeName == '4'"/>
  </div>
</template>
<script setup>
import { ref, toRefs, computed, markRaw, nextTick } from "vue";
// 待提交
import PendingReview from "./pendingReview.vue";
// 已通过
import Passed from "./passed.vue";
// 未通过
import NotPass from "./notPass.vue";
// 黑名单
import Blacklist from "./blacklist.vue";
 
const componentRef = ref();
 
const props = defineProps({
  callData: {},
});
const activeName = ref("1");
 
</script>
<style></style>

http://www.kler.cn/a/296977.html

相关文章:

  • LeetCode 热题 100 回顾
  • c#中Graphics常用的属性
  • 十二、C语言:内存函数
  • matlab数据批量保存为excel,文件名,行和列的名称设置
  • 0基础跟德姆(dom)一起学AI Python进阶08-生成器,property关键字,正则表达式
  • Python 全栈系列268 数据库浅析
  • PHP Redis扩展详解
  • 智慧驱动,效能跃升 | 华宇市场监管现场执法数智助手
  • CentOS 7.9 安装
  • Vue 介绍与体验
  • 概率DP (由一道绿题引起的若干问题。目前为一些老题,蒟蒻的尝试学习1.0)
  • Docker Elasticsearch安装ik分词插件教程
  • LinuxQt下的一些坑之一
  • 基于STM32设计的智能安防系统(微信小程序)(218)
  • Java 设计模式-代理模式
  • 【Dart 教程系列第 50 篇】在 Flutter 项目的国际化多语言中,如何根据翻译提供的多语言文档表格,快速生成不同语言的内容
  • Redis使用——Redis的redis.conf配置注释详解(三)
  • CSS之我不会
  • 深入了解以太坊
  • Unity TextMeshPro 设置竖排