vue3动态组件使用

Vue3动态组件的用法

在使用vue3的动态组件时，无意中发现的这种情况，所以记录了一下。

动态组件

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象

具体看：组件基础 | Vue3中文文档 - vuejs (javascriptc.com)

在某个vue文件中使用局部引用的方式时

在使用Vue3的setup语法糖的时候，注意了动态组件这里传的是组件，而不是组件的字符串名称。否则显示不出来

结果如下图所示

利用vue中的动态组件，就可以进行切换了

App.vue 中的代码以及引用的两个组件的代码截图如下

<script setup lang="ts">
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue';
import Home from './components/Home.vue';

let currentComponent = ref(HelloWorld)
function changHellWorld() {
  // 注意了，这里不是字符串哦
  currentComponent.value = HelloWorld
}
function changHome() {
  // 注意了，这里不是字符串哦
  currentComponent.value = Home
}
</script>

<template>
  <div>
    <span>这个是APP根组件</span>
    <!-- // 注意了，这里不是字符串哦 -->
    <component :is="currentComponent"></component>
    <el-button type="primary" plain @click="changHellWorld">切换HelloWord组件</el-button>
    <el-button type="primary" plain @click="changHome">切换Home组件</el-button>
  </div>
</template>

<style scoped>

</style>

结果如下所示

如果是引用全局组件时

注意，这时我们在动态组件里面的写的是字符串，字符串，而不是像上面一样写的是组件。如下面所示，我在main.ts中将HelloWorld.vue和Home.vue注册为了全局组件，在app.vue中使用动态组件引用如下图所示

结果如下图所示

进行动态切换是也是用字符串，App.vue的代码如下

<script setup lang="ts">
import {ref} from 'vue'
// 全局注册了之一，就不用引用了
// import HelloWorld from './components/HelloWorld.vue';
// import Home from './components/Home.vue';

/**
 * 注意这里是字符串哦
 */
let currentComponent = ref('HelloWorld')
function changHellWorld() {
  /**
   * 注意：这里是字符串哦
   */
  currentComponent.value = 'HelloWorld'
}
function changHome() { 
  /**
   * 注意： 这里是字符串哦
   */
  currentComponent.value = 'Home'
}
</script>

<template>
  <div>
    <span>这个是APP根组件</span>
    <!-- // 注意了，这里不是字符串哦 -->
    <component :is="currentComponent"></component>

    <el-button type="primary" plain @click="changHellWorld">切换HelloWord组件</el-button>
    <el-button type="primary" plain @click="changHome">切换Home组件</el-button>
  </div>
</template>

<style scoped>

</style>

结果如下所示