如何在组件vuejs中显示带有插槽的原始HTML

Question

<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>

Answer 1

使用v-html指令：

Vue.component("raw-text", {
data: function() {
  return {
    slotHtml: 'パスワードの再設定を行います'
  }
},
template: `<div>
             <span ref="source"><slot v-html="slotHtml"></slot></span>
            </div>`,
});