Vue之动态组件

动态创建组件的方式有哪些

• v-if
• is属性

v-if形式

这种形式最为常见，但是相对来说比较好性能

<template>
<div>
  <template v-if="tabAcitve === 'cate'">
    <cate  />
  </template>
      <template v-if="tabAcitve === 'about'">
    <cate  />
  </template>
</div>
</template>

is属性

<template>
<div>
  <div
    class="tab"
    v-for="(item, index) of tabs"
    :key="index"
    @click="onClick(item)"
  >
    {{ item }}
  </div>
  <main>
    <component :is="tabActive"></component>
  </main>
</div>
</template>
<script>
import Cate from "@/components/Cate";
import About from "@/components/About";
export default {
provide: { userInfo: { id: 1, name: "admin" } },
data() {
  return {
    tabActive: "Cate",
    tabs: ["Cate", "About"],
  };
},
methods: {
  onClick(item) {
    this.tabActive = item;
  },
},
components: {
  Cate,
  About,
},
};
</script>

<style scoped>
.tab {
display: inline-block;
padding: 15px 30px;
}
</style>

结论

现在看来，is属性结合component的代码可读性更高，更符合动态组件的表现，而v-if引入多个组件的时候，代码会变得难以阅读，不宜与维护。