如何在组件vuejs中显示带槽的原始html
提问于 2019-01-28 05:35:45
<template slot="content">
<form-label class="align-left">パスワードの再設定を行います。</form-label>
</template>如何在Vuejs中将<form-label class="align-left">パスワードの再設定を行います。</form-label>显示为组件中插槽的文本？
Vue.component("raw-text", {
template: `<div>
<span ref="source"><slot></slot></span>
</div>`,
mounted: function() {
this.$el.innerText = this.$refs.source.innerHTML;
}});我已经尝试过了，但是$refs.source.innerHTML是编译过的源代码，我不希望这样。
我期望输出为：<form-label class="align-left">パスワードの再設定を行います。</form-label>，但实际输出为<div class="align-left nts-label"><label><!----> パスワードの再設定を行います。</label></div>
回答 1
Stack Overflow用户
发布于 2019-01-28 06:03:47
使用v-html指令：
Vue.component("raw-text", {
data: function() {
return {
slotHtml: 'パスワードの再設定を行います'
}
},
template: `<div>
<span ref="source"><slot v-html="slotHtml"></slot></span>
</div>`,
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54396071
复制
腾讯云开发者
