Vue3 动态切换组件component

缘如风

于 2024-03-18 21:55:03 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VueJS Web 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/136823262

提供选项式、组合式两种写法实现component的动态切换。

代码如下

<template>
  <h3>测试</h3>
  <button @click="currentTemplate =HelloWorld">切换到HelloWorld</button>
  <button @click="currentTemplate =TheWelcome">切换到TheWelcome</button>
  <button @click="switchComponent(curindex)">switchComponent切换</button>
  
  <br/>
  <component :is="p1 ? HelloWorld : TheWelcome" > </component>
  <br/>
  <component :is="currentTemplate" > </component>

</template>

<script setup>
import { ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

const p1 = true;

const currentTemplate = ref(HelloWorld); //赋值是重点 不能是 ref("HelloWorld")
const curindex = ref(1);


function switchComponent(index) {
  console.log(index);
  curindex.value = index+1;
  if (index%2)
  {
    currentTemplate.value = TheWelcome;
  }
  else
  {