vue中动态组件component的实际应用

定义

vue提供了一个内置的组件，专门用来实现动态组件的渲染：通过 is 属性动态指定要渲染的组件

<component is="组件名称"></component>

使用

单独使用component 会频繁的触发组件的创建和销毁,性能不好,且会丢失组件状态，所以一般搭配keepalive组件使用，缓存组件状态，用于切换显示的组件会触发activated和deactivated两个生命周期函数，
组件激活时调用activated
组件冻结时调用deactivated

<template>
  <div class="p-resouerce">

      <div class="tabs">
        <div class="tabs__nav">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            class="tab"
            :class="[{ 'tab--selected': tab === item.value }]"
            @click="changeTab(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="tabs__content">
          <transition name="fade-transform" mode="out-in">
            <keep-alive>
              <component :is="currentView"></component>
            </keep-alive>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import one from './one.vue';
import two from './two.vue';
import three from './three.vue';

export default {
  name: 'Resource',
  data() {
    return {
      tab: 1,
      tabList: [
        {
          value: 1,
          name: 'tab页1',
          path: 'one',
          type: 'NetworkDis',
        },
        {
          value: 2,
          name: 'tab页2',
          path: 'two',
          type: 'School',
        },
        {
          value: 3,
          name: 'tab页3',
          path: 'three',
          type: 'Platform',
        },
      ],
      fromPage: '',
    };
  },
  components: {
    one,
    two,
    three,
  },
  computed: {
    currentView() {
      let path = '';
      this.tabList.forEach((item) => {
        if (item.value === this.tab) {
          path = item.path;
        }
      });
      return path;
    },
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1);
    },
    // 切换tab
    changeTab(value) {
      this.tab = value;
    },
  },
  beforeRouteLeave(to, from, next) {
    if (['/lesson'].includes(to.path)) {
      this.$store.dispatch('lesson/initState');
    }
    next();
  },
  created() {
    const { type, fromPage } = this.$route.query;
    this.fromPage = fromPage;
  }
};
</script>
<style lang='scss' scoped>

</style>