使用局部创建组件template内的绑定变量报错

[LiangLiJin]

业务需求是他要在页面写h5页面代码 而我从后台拿回来这个代码渲染上去 他写的函数要能实现调用 我想到用局部注册组件 如果template后面直接写代码就能正常使用 但是这个代码需要从后台拿回来 但是 使用局部创建组件template内的绑定变量报错 我也使用过v-html方法 v-html不识别script标签 v-html的事件也触发不了外面的函数

<template>
 <div class="hello">
  <h1>
   我是父组件
  </h1>
  <div class="parent" id="parent">
  </div>
 </div>
</template>

<script>
import Vue from 'vue'
var MyComponent = Vue.extend({
  data: function () {
    return {
      urlId: '',
      jsContent: '',
      html: `<a @click="show(1)">我是大魔王</a>`
    }
  },
  template: this.html,
  methods: {
    show (i) {
      console.log(i)
    }
  }
})
var component = new MyComponent().$mount()
export default {
  data () {
    return {
    }
  },
  methods: {
  },
  mounted () {
    document.getElementById('parent').appendChild(component.$el)
  }
}
</script>