v-html 未在 Vue 2 中呈现 vue 组件 [英] v-html not rendering vue component in Vue 2

问题描述

我正在尝试使用 props 渲染组件.但仅当内容道具不是组件时才有效.

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

//注册模态组件Vue.component('组件', {模板:'<span class="component-tag">这是组件</span>',})//启动应用新的 Vue({el: '#app',数据:函数(){返回 {test1 : '<label>这是标签</label>',test2 : '<component></component>'//这行不通}}})<!-- 应用程序--><div id="应用程序"><span v-html="test1"></span><span v-html="test2"></span>

这可能吗?

解决方案

不，您不能使用 v-html 执行此操作，因为 文档 明确指出:

<块引用>

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

内容作为纯 HTML 插入 - 数据绑定/vue 组件被忽略.请注意，您不能使用 v-html 来组合模板部分，因为 Vue 不是基于字符串的模板引擎.相反，组件更适合作为 UI 重用和组合的基本单元.

I am trying render a component using props. But only works when content props is not a component.

Here is an example: 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>

Is this possible?

解决方案

No, You can not do this using v-html, as documentation clearly points out:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.

The contents are inserted as plain HTML - data bindings/vue components are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

这篇关于v-html 未在 Vue 2 中呈现 vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！