[vue3进阶] 2.动态组件

之前我们用到一个组件的时候，在模板里写上组件的标签就可以使用了

<counter></counter>

这样，在页面上就会显示这个组件，这个组件是固定的
动态组件是不固定要显示哪个组件，只是有个component标签，表示在模板的相应位置有一个组件，
它具体显示哪个组件，要根据它的is属性来决定

<component :is="currentComponent"></component>

is绑定currentComponent是一个字符串，表示一个组件的名字，组件名字改变时，component标签这个位置显示的组件就会变化

还是用我们之前用过的两个组件做示例，表示两个不同的组件componentA和componentB，在点击按钮时，切换组件，

<template>
  <div>
    <button @click="onClick">点击切换组件</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
// 动态组件
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'
export default {
  name: 'App',
  components: {
    // 声明要使用哪些组件
    componentA,
    componentB,
  },
  data() {
    return {
      currentComponent: 'componentA',
    }
  },
  methods: {
    onClick() {
      if (this.currentComponent === 'componentA') {
        this.currentComponent = 'componentB'
      } else {
        this.currentComponent = 'componentA'
      }
    },
  },
}
</script>

<style></style>

点击按钮就可以切换显示的组件

动态组件的内容就是这么简单，下面我们来举一个实际应用中的例子，
比如在一个应用中的个人中心，有几个模块

假如这几个模块显示的顺序，或者哪个模块显示、哪个模块不显示是根据用户的不同有所区别的，
那么我们可以使用动态组件去实现这个功能，
1）把这个组件名字都放到一个数组里，
2）通过for循环把这些组件用动态组件写在template中
3）控制数组的顺序和内容，实现组件的顺序和显示

<template>
  <div>
    <component v-for="item in list" :key="item" :is="item"></component>
  </div>
</template>

<script>
// 动态组件
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'
import componentC from './components/componentC.vue'
import componentD from './components/componentD.vue'
export default {
  name: 'App',
  components: {
    // 声明要使用哪些组件
    componentA,
    componentB,
    componentC,
    componentD,
  },
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    // 获取用户信息
    // 根据用户信息决定list数组的内容
    this.list = ['componentA', 'componentB', 'componentC', 'componentD']
  },
}
</script>

<style></style>

这节课就是这些内容了，下节课再见。