v-html无法在Vue 2中呈现vue组件

Question

我正在尝试使用道具渲染组件。但是仅当内容道具不是组件时才起作用。

这是一个示例：https : //jsfiddle.net/eugenio4/onf54vt5/

// register modal component
Vue.component('component', {
  template: '<span class="component-tag">This is component</span>',
})

// start app
new Vue({
  el: '#app',
  data: function (){
    return {
        test1 : '<label>this is label</label>',
        test2 : '<component></component>' //this doest work
    }
  }
})

<!-- app -->
<div id="app">  
  <span v-html="test1"></span>
  <span v-html="test2"></span>
</div>

这可能吗？

Answer 1

不，您无法使用v-html进行此操作，因为文档明确指出：

请注意，内容是作为纯HTML插入的-它们不会被编译为Vue模板。

内容以纯HTML格式插入-数据绑定/ vue组件被忽略。请注意，由于Vue不是基于字符串的模板引擎，因此无法使用v-html来组成模板部分。取而代之的是，组件是UI重用和合成的基本单位。