Vue高阶技巧-component组件局部动态注册

<script>
export default {
  data() {
    return {
      renderComps: []
    }
  },
  created() {
    this.registerComponents({
      CompA: () => import("xxxx/comp-a"),
      CompB: () => import("xxxx/comp-b"),
    });
    // render
    this.renderComps = ["CompA", "CompB"];
  },
  methods: {
    registerComponents(components) {
     for (let name in components) {
       this.constructor.component(name, components[name]);
     }
    }
  },
  render(h) {
    const children = [];
    this.renderComps.forEach((comp, key) => {
      children.push(h(comp, { key }));
    });
    return h("div", {}, children);
  }
};
</script>
发布时间:2019-08-28
目录