在JavaScript中使用Vue插槽html阻止其呈现

Question

以下是呈现按钮的简单Vue组件（在片段下方用作演示）。按下它会将插槽的innerHTML传递给一个函数（当前是一个简单的console.debug（））。该解决方案效果很好，但是需要删除插槽的父级（是的，我知道它是隐藏的，但如果可能的话，我想要一个更干净的解决方案）。

Vue.component('test', {
  template: `
        <div id="test">
            <button @click="pressHandler">Press</button>
            <div id="hidden-slot" v-show="false">
                <slot></slot>
            </div>
        </div>
  `,
  methods: {
      pressHandler() {
          // here I pass slot rendered HTML to another function/framework
          console.debug(this.slot);
      }
  },
  mounted() {
      var slotContainer = this.$el.querySelector('#hidden-slot');
      this.slot = slotContainer.innerHTML;
      slotContainer.parentNode.removeChild(slotContainer);
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  Instructions: please enable developer console then presse the button
  <test>
    <h1>This block will be hidden</h1>
    <strong>Text to insert</strong>
  </test>
</div>

我正在寻找一种避免在模板中使用slot标签的方法，如下所示：

<template>
    <div id="test">
        <button @click="pressHandler">Press</button>
    </div>
</template>

并使用一些JavaScript渲染广告位（即使模板中不存在<slot>标签，因为其内容也存在于this。$ slots.default中）并将渲染的HTML分配给内部变量。

以下代码段将广告位内容打印为Vnode而非HTML：

Vue.component('test', {
  template: `
        <div id="test">
            <button @click="pressHandler">Press</button>
        </div>
  `,
  data() {
      return {
          slot: undefined
      };
  },
  methods: {
      pressHandler() {
          // here I pass slot rendered HTML to another function/framework
          console.debug(this.$slots.default[0]);
      }
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  Instructions: please enable developer console then presse the button 
  <test>
    <h1>This block will be hidden</h1>
    <strong>Text to insert</strong>
  </test>
</div>