Vue v-html不能触发点击事件

现象：后端返回到前端的是html格式的数据，前端用v-html解析渲染，例如:<span @click='add()'>点击</span>,span标签成功渲染，但是绑定的事件无法触发

原因：vue没有将其作为vue的模板解析渲染 解决方法：不用v-html而是component模板编译

<template>
    <div>
        父组件
        <div class='parent' id='parent'></div>
    </div>
</template>
<script>
    import Vue from 'vue'
    var MyComponent = Vue.extend({
        template: '<span @click='add()'>点击</span>',
          methods: {     
            add() {
                console.log('触发点击事件');
            },
        }
    })
    let component=new MyComponent().$mount()
    export default {
        data() {
            return {
            }
        },
        methods: {
        },
        mounted() {
            document.getElementById('parent').appendChild(component.$el);
        }
    }
</script>

用到的API

• Vue.extend(options) 基础Vue构造器，创建一个“子类”
• vm.$mount() 可以使用 vm.$mount() 手动地挂载一个未挂载的实例

参考文档：cn.vuejs.org/v2/api/inde…