<template>
  <div class="b">
    <cmp :html="data" @handleChange="handleChange"></cmp>
  </div>
</template>

<script>
import Vue from 'vue/dist/vue.common.js'//注意引用方式
export default {
  components: {
    cmp: {
        props: {
          html: String,//拿父类传过来的值
        },
        
        render(h) {//生成组件
          const com = Vue.extend({
            template: this.html,
            data(){
                return {
                    title:"动态组件"
                }
            },
          })
          return h(com,{
            nativeOn: {//绑定点击事件  还可以On:{}
              click:()=>{
                this.$emit("handleChange")//调用父类方法
              }
           },
          })
        }
       }
  },
  mounted(){
        
  },
  data() {
    return {
      data: "<div class='a'><h2>{{title}}</h2><p></p></div>",
    };
  },
  methods: {
  },
};
</script>
<style>
.a {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
</style>

同时修改vue.config.js

 resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
      }
    },