Получить визуализированное HTML-содержимое слота Vue как переменную

Question

Я знаю, что вы можете сделать что-то вроде этого:

<div id="app">
  <div class="container">
    <h1 class="title is-1" v-html="text"></h1>
    <get-slot-contents>
      <p>Hi there</p>
      <p>Hi <span>heloo</span></p>
      <p>Hi there</p>
      <p>Hi there</p>
    </get-slot-contents>
  </div>
</div>

// JS

Vue.component('get-slot-contents', {
  data: function () {
    return {
      html : false
    }
  },
  template: `<div>
    ****
    <slot></slot>
    ****
  </div>`,
  mounted(){
    console.log(this.$slots.default);
  }
});

В этом журнале регистрируется следующее:

[fo, fo, fo, fo, fo, fo, fo]

Каждый fo содержит что-то вроде:

{tag: undefined, data: undefined, children: undefined, text: " ", elm: text, …}

Как бы я console.log что-то вроде:

<p>Hi there</p><p>Hi <span>heloo</span></p><p>Hi there</p><p>Hi there</p>

Для целей этого вы можете предположить, что нет вложенных компонентов.

Answer 1

Будет ли у вас работать innerHTML из this.$el?

демо: https://codepen.io/jacobgoh101/pen/vjmzWg?editors=1010

<div id="app">
  <div class="container">
    <h1 class="title is-1"></h1>
    <get-slot-contents>
      <p>Hi there</p>
      <p>Hi <span>heloo</span></p>
      <p>Hi there</p>
      <p>Hi there</p>
    </get-slot-contents>
  </div>
</div>

Vue.component("get-slot-contents", {
  data: function() {
    return {
      html: false
    };
  },
  template: `<div>
    ****
    <div class="slot-wrapper">
        <slot></slot>
    </div>
    ****
  </div>`,
  mounted() {
    console.log(this.$el.getElementsByClassName("slot-wrapper")[0].innerHTML);
  }
});

new Vue({
  el: "#app"
});