在.vue文件中插入一个动态编辑的组件

工作中有个需求，做一个动态组件，也就是组件代码由客户书写，然后生成页面，所以，就需要将动态书写的组件插入到页面中，不过，目前我这边只是做了一个初步版本：需要用户书写js文件的组件

<template>
  <div class="widgetCustom" ></div>
</template>

<script>
import Vue from "vue";
export default {
  watch: {
   sourceCode() {
      this.generalDynamicComponents(this.sourceCode);
    },
  },
  mounted() {
    this.generalDynamicComponents(this.sourceCode);
  },
  methods: {
    //data是动态组件代码，数据demo在后面列出
    generalDynamicComponents(data) { 
      let myComponent = data;
      //将组件挂载到根节点
      let instance = new Vue({
        el: document.createElement("div"),
        render: (h) => h(myComponent),
      });
      this.$nextTick(() => {
        let rootdom = document.querySelector(".widgetCustom");
        if (rootdom) {
          rootdom.innerHTML = "";
          rootdom.appendChild(instance.$el);
        }
      });
    },
  },
};
</script>

//data的demo  这里的代码是动态传递给我们自己的组件的
{
   data() {
     return {
       username: "aaa",
     };
   },
   render(createElement) {
     return createElement("div", {
       style: {
         //样式
         width: "300px",
         height: "200px",
         background: "#01ba8e",
         color: "#fff",
         textAlign: 'center',
         lineHeight: '200px',
         fontSize: '30px',
       },
       class: {
         //类名
         current: true,
           active: false,
       },
       attrs: {
         //正常的html特性
         id: 'foo',
       },
       props: {
         //组件的props属性
         myName: 'bar',
       },
       domProps: {
         //dom属性
         innerHTML: this.username,
         value: '',
       },
       on: {
         //事件监听
         click: () => {
           console.log('点击事件')
         },
       },
       //其他的特殊顶层属性
       ref: 'myRef',
     });
   },
 }