工作中有個需求，做一個動態組件，也就是組件代碼由客戶書寫，然后生成頁面，所以，就需要將動態書寫的組件插入到頁面中，不過，目前我這邊只是做了一個初步版本：需要用戶書寫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',
     });
   },
 }