如何在模板中使用<slot>？

Question

我试图理解在Vue模板中的用法。据我理解，插槽可以用来将组件中的子内容传递给模板。

下面是一个简短的、最小的工作示例(也是关于代码的)。

​

Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})

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

<script type="text/x-template" id="mine">
  <h1>this is it</h1>
  <slot></slot>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>

​

我希望输出是这样的：

<h1>this is it</h1>
<p>why isn't this displayed</p>

但是，当呈现页面时，第二行不会出现。

Answer 1

模板需要一个单一的根DOM元素。看起来Vue只是把h1作为整个模板，然后丢弃其余的模板：

​

Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})

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

<script type="text/x-template" id="mine">
  <div>
    <h1>this is it</h1>
    <slot></slot>
  </div>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>

​

(使用"developer模式“版本的库将为您提供更好的有关此类内容的错误消息：)

Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})

<script src="https://vuejs.org/js/vue.js"></script>

<script type="text/x-template" id="mine">
    <h1>this is it</h1>
    <slot></slot>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>

​