vue动态加载组件

需求: 项目遇到一个打印需求, 每次打印可能会选取不同的打印模板, 而这些模板如果很多的话, 难以存放在同一个vue组件里管理, 因此需要放在本地以多个.vue文件存储. 在打印时再根据需要的模板, 动态获取对应的.vue模板文件

实现思路: vue自带动态组件和异步组件的功能, 参考: 动态组件
实现思路是通过点击事件, 异步获取组件, 再利用动态组件渲染获取的组件

DEMO: 在线DEMO

实现:

<template>
  <div id="app">
  	// 动态组件渲染
    <component v-if="asyncComp" :is="asyncComp" />
    <button @click="toggleComp">切换组件</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {},
  data() {
    return {
      // 保存异步组件
      asyncComp: null,
      idx: "0",
    };
  },
  methods: {
  	// 切换组件
    toggleComp() {
      if (this.idx === "0") {
        this.idx = "1";
      } else {
        this.idx = "0";
      }
      // 加载组件
      this.asyncComp = () => import(`./components/${this.idx}.vue`);
    },
  },
};
</script>