vue中通过注册方法动态调用组件

文件结构

├── src
│ ├── components
│ │ ├── dynamicCreation
│ │ │ ├── index.js
│ │ │ ├── index.vue
│ └── main.js

---

index.js

import PerfectInformation from "./index.vue";
import Vue from "vue";

const InformationConstructor = Vue.extend(PerfectInformation);

function show(param) {
  console.log("param", param);
  const Dom = new InformationConstructor({
    el: document.createElement("div"),
    data() {
      return {};
    },
  });
  document.body.appendChild(Dom.$el);
  Dom.dialogTableVisible = true;
}

function dynamicCreation() {
  Vue.prototype.$dynamicCreation = show;
}
export default dynamicCreation;

index.vue

<template>
  <div class="public-component">
    <el-dialog
      title="收货地址"
      :visible.sync="dialogTableVisible"
      @closed="close"
    >
      测试
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
    };
  },
  methods: {
    close() {
      //关闭弹框时 删除dom，否则body里会创建多个dom
      this.$el.parentNode.removeChild(this.$el);
    },
  },
};
</script>

main.js

import dynamicCreation from "./components/dynamicCreation/index.js";
Vue.use(dynamicCreation);

调用

this.$dynamicCreation();