Vue3中使用component :is 加载组件

会说法语的猪

已于 2022-02-11 11:33:46 修改

阅读量4.2w

点赞数 21

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js

于 2022-02-11 11:30:50 首次发布

本文链接：https://blog.csdn.net/m0_51431448/article/details/122875963

vue3 专栏收录该内容

42 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串

<template>

  <Child1 />
  <Child2 />
  <component :is="currentComp"></component>

  <el-button @click="compChange">切换组件</el-button>

</template>
<script>
  import { ref } from 'vue'
  import Child1 from './Child1.vue'
  import Child2 from './Child2.vue'
  export default {
    components: {
      Child1,
      Child2
    },
    setup() {
      let currentComp = ref('Child1')

      // 切换组件
      const compChange = () => {
        if(currentComp.value == 'Child1') {
          currentComp.value = 'Child2'
        }else {
          currentComp.value = 'Child1'
        }
      }
      return {
        currentComp,
        compChange

了解本专栏