vuejs2 从插槽中删除 html 节点答案

【问题标题】：vuejs2 remove html node from slotvuejs2 从插槽中删除 html 节点
【发布时间】：2018-03-31 15:52:14
【问题描述】：

使用以下代码：

    <div id="app">
        <compo1>
            <div slot="firstname">test</div>
        </compo1>
    </div>

new Vue({
    el: '#app',
    components: {
        'compo1':  {
                template: '<div><div>Custom Text</div><slot name="firstname"></slot></div>'
            }
    }
});

我的组件将呈现如下：

<div><div>Custom Text</div><div>test</div></div>

但我想生成这个：

<div><div>Custom Text</div>test</div>

所以它是相同的代码，但在这里，“div slot”被删除了......

【问题讨论】：

没有办法做到这一点，除非你添加几个 javascript 逻辑，老实说，改变它是一个坏主意，你永远不知道是否有问题。它们只是 div，我认为没有必要删除一个

标签： vuejs2

【解决方案1】：

您可以在指定插槽的内容 (<template slot="firstname">test</template>) 时在父级中使用 <template> 代替 <div>：

new Vue({
  el: '#app',
  components: {
    'compo1': {
      template: '<div><div>Custom Text</div><slot name="firstname"></slot></div>'
    }
  },
  mounted() {
    out.innerText = 'Rendered: '+ this.$el.outerHTML;
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <compo1>
    <template slot="firstname">test</template>
  </compo1>
</div>

<pre id="out"></pre>

【讨论】：