获取 Vue 插槽的渲染 HTML 内容作为变量

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>

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