Vue 슬롯의 렌더링된 HTML 콘텐츠를 변수로 가져옵니다.

Vue 슬롯의 렌더링된 HTML 콘텐츠를 변수로 가져옵니다.

난 네가 이런 걸 할 수 있다는 걸 알아.

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

이를 위해 중첩된 구성요소는 없다고 가정할 수 있습니다.

줄래 점점 얻을 수 있을까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"
});

언급URL : https://stackoverflow.com/questions/50133153/get-rendered-html-contents-of-vue-slot-as-variable