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

Question

我正在制作一些網絡功能。 但是我有一個問題。 我想創建幾個HTML結構，在v-html中添加vue指令，但我做不到。 那么，如何使用v-html渲染vue指令？

當然，我知道這可能導致xss漏洞，但是我將過濾所有關鍵標簽，所以我不在乎。

請分享您的提示！！

1. 我已經使用了Vue.compile函數。 但是，它僅支持完整版本，而這與我的情況不符。

2. <button @click="go()">go</button>這是我想使用v-html制作的。 但是不會呈現@click指令...

這是App.vue結果

但是轉到按鈕無法調用轉到功能。

---

應用程序

<template>
  <div id="app">
    <input type="text" v-model="name" />
    <p v-html="name"></p>
    <!-- Below tag is what i want to make using v-html -->
    <!-- <button @click="go()">gogo</button> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data:function(){
    return {
      name:'',
    }
  },
  methods:{
    go(){
      alert('hi');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

您嘗試實現的是將字符串編譯為Vue.js模板組件。 您可以使用'：is'指令引用動態組件，並將該動態組件中的本地字符串化數據和函數綁定到您的主要Vue實例或組件。

即：

<div id="app">
  <div :is="dynamicComponent"></div>
</div>

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')
    }
  }
})

JSFiddle實現： https ://jsfiddle.net/jexzywua/1/