vue动态组件

2023-11-23 12:16:12

对于vue中的动态组件，绝大多数都是利用和<#>component</#keyword> 实现的。这两种方式各有利弊。

一、 <#>v-if</#keyword>

使用方便快捷，是实现动态组件的最直接、最简单的方案。
不过相对的，这种方式过于简单，容易造成html结构凌乱。
代码量多。

二、 <#>component</#keyword>

代码量少，相对简洁。
需要定义多个子组件。

//1.v-if
<template>
  <div>
    <component v-if="currentComponent == 'A'" :is="componentA"></component>
    <component v-if="currentComponent == 'B'" :is="componentB"></component>
  </div>
</template>

<script>
import componentA from './componentA.vue'
import componentB from './componentB.vue'

export default {
  data() {
    return {
      currentComponent: 'A'
    }
  },
  components: {
    componentA,
    componentB
  }
}
</script>


//2.component
<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import componentA from './componentA.vue'
import componentB from './componentB.vue'

export default {
  data() {
    return {
      currentComponent: 'A'
    }
  },
  components: {
    'component-a': componentA,
    'component-b': componentB
  }
}
</script>