<template>
  <div>
    <!-- 通过slot拿到html标签内容，渲染后删除slot -->
    <span ref="raw" style="display: none;"><slot></slot></span>
    <!-- 解析获取到的html字符串为html标签 -->
    <div v-html="nodeHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'stringHtml',
  data() {
    return {
      nodeHtml: ''
    };
  },
  mounted() {
    const { $slots = {} } = this;
    const defaultNodes = $slots.default || {};
    const vnode = defaultNodes[0] || {};
    const { elm = {} } = vnode;
    this.nodeHtml = elm.innerText;
    this.$refs.raw.parentNode.removeChild(this.$refs.raw);
  }
}
</script>