【发布时间】:2016-09-05 02:55:46
【问题描述】:
我正在尝试在 v-html 中使用组件。 我想从自己的 API 中获取 html,然后我会展示出来。
这是我的代码。
HTML:
<!-- app -->
<div id="app">
<span v-html="html"></span>
<badge></badge>
<span v-html="html2"></span>
<partial name="my-partial"></partial>
<span v-html="html3"></span>
</div>
Javascript:
Vue.component('badge', {
template: '<span class="component-tag">This is component</span>',
})
Vue.partial('my-partial', '<p>This is a partial!</p>')
// start app
new Vue({
el: '#app',
data: {
html: '<p>THIS IS HTML</p>',
html2: '<badge></badge>',
html3: '<partial name="my-partial"></partial>'
}
})
https://jsfiddle.net/9w3kz6xm/4/
我尝试使用 partials,因为 Vue 文档说“如果你需要重用模板片段,你应该使用 partials。”
它不起作用。也许我犯了错误,我不知道什么是错误。
谢谢。
【问题讨论】:
-
当文档说“你应该使用 partials”时,并不意味着“使用 partials 和 v-html”,它的意思是“使用 partials 而不是 v-html”。使用
v-html插入的所有内容都只会是纯 HTML,这意味着其中没有任何组件、指令、胡子标签或部分或任何特定于 Vue 的内容。 -
按照你的链接,我觉得一切正常。
-
@LinusBorg 我明白了!谢谢!这是我的答案代码。 https://jsfiddle.net/9w3kz6xm/7/
-
@Ben 感谢您的评论。我得到了答案。谢谢!
标签: javascript vue.js