Javascript 是否可以在v-html指令中放入指令？

我正在制作一些网络功能。但我有一个问题。 我想创建几个html结构，用v-html添加vue指令，但我做不到。 那么，如何使用v-html呈现vue指令

当然我知道这会导致xss漏洞，但我会过滤任何关键标记，所以我不在乎

请分享你的建议

我已经使用了Vue.compile函数。但是，它只支持完整构建，这与我的情况不匹配

go

这就是我想使用v-html制作的内容。 但未呈现@click指令

这是

App.vue

result

但go按钮无法调用go函数

---

App.vue

//从“./components/HelloWorld.vue”导入HelloWorld
导出默认值{
名称：“应用程序”，
数据：函数（）{
返回{
名称：“”，
}
},
方法：{
go（）{
警报（“hi”）；
}
}
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

您试图实现的是将字符串编译为Vue.js模板组件。您可以使用“：is”指令引用动态组件，并将本地字符串化数据和函数从此动态组件绑定到主Vue实例或组件

i、 e:

newvue({
el:“应用程序”，
数据：{
模板：“{sharedValue}}”，
sharedValue:“这是一个共享值”
},
计算：{
dynamicComponent（）{
让f_SharedUnwithContext=this的类型。SharedUnwithContext==='function'
？此.SharedUnwithContext
: () => {}
返回{
模板：this.template，
//将每个共享数据重定向到此处
数据：（）=>{
返回{
sharedValue:this.sharedValue
}
},
//在此处重定向每个共享方法
方法：{
sharedFun:（）=>{
返回此文件。sharedFun（）
},
SharedUnwithContext（参数）{
//“this”包含动态组件上下文
返回f_sharedfunthContext（参数）；
}
}
}
}
},
方法：{
sharedFun（）{
警报（'在根实例上执行一些安全操作'）
},
SharedUnwithContext（）{
警报（'在根实例上执行一些安全操作'）
}
}
})

---

JSFIDLE实现：

您是否只需要事件侦听器，或者在

v-html

中是否需要Vue语法的其他部分？请尝试使用

v-on

类似的

v-on=“{click:go（）}”

@skirtle我想使用更多指令，不仅仅是

v-on

事件监听器内部

v-html

：）@Michael谢谢分享提示！但是

go

也不起作用：，（如果我理解，您会将动态Vue模板“gogo”放在name var中，然后渲染它吗？

new Vue({
  el: "#app",

  data: {
    template: '<button @click="sharedFun()">{{ sharedValue }}</button>',
    sharedValue: 'this is a shared value'
  },

  computed: {
    dynamicComponent() {
        let f_sharedFunWithContext = typeof this.sharedFunWithContext === 'function'
        ? this.sharedFunWithContext
        : () => {}

        return {
        template: this.template,

        // redirect every shared data here
        data: () => {
            return {
            sharedValue: this.sharedValue
          }
        },

        // redirect every shared methods here
        methods: {
            sharedFun: () => {
            return this.sharedFun()
          },

          sharedFunWithContext(params) {
            // 'this' contains dynamic component context
            return f_sharedFunWithContext(params);
          }
        }
      }
    }
  },

  methods: {
    sharedFun() {
        alert('do some secure stuff on root instance')
    },

    sharedFunWithContext() {
        alert('do some secure stuff on root instance')
    }
  }
})