vue动态组件加载例子

<!--
 * @Author: your name
 * @Date: 2020-07-21 20:50:21
 * @LastEditTime: 2020-07-31 20:15:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \今日头条Demo\src\views\UserArticle\UserArticle.vue
--> 
<style lang="less" scoped>
.UserArticle {
  padding: 90px 0 50px;
  /deep/ .van-tabs__wrap {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
<template>
  <div class="UserArticle">
    <!-- 导航栏 -->
    <van-nav-bar title="我的收藏/历史/作品" left-arrow @click-left="$router.back()" fixed></van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab title="我的收藏"></van-tab>
      <van-tab title="我的历史"></van-tab>
      <van-tab title="我的作品"></van-tab>
    </van-tabs>

    <!-- 动态组件 -->
    <component v-bind:is="currentTabComponent"></component>
  </div>
</template>

<script>
export default {
  name: "UserArticle",
  components: {
    "kv-userarticle": () => import("../../components/UserArticle/article"),
    "kv-history": () => import("../../components/UserArticle/history"),
    "kv-collect": () => import("../../components/UserArticle/collect"),
  },
  props: {
    type: {
      type: String,
    },
  },
  data() {
    let active = ["collect", "history"].indexOf(this.type);
    if (active === -1) {
      active = 2;
    }
    return {
      active: 0,
      // currentTabComponent:'kv-userarticle'
    };
  },
  watch: {},
  computed: {
    currentTabComponent() {
      return ["kv-history", "kv-collect", "kv-userarticle"][this.active];
    },
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>