Slot

作为对Component的补充，Vuejs 增加了 Slot 这个功能.

普通的Slot

我们从具体的例子来说明。

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id='app'>
  7.         <study-process>
  8.             我学习到了Slot 这个章节。
  9.         </study-process>
  10.     </div>
  11.     <script>
  12.         Vue.component('study-process', {
  13.           data: function () {
  14.             return {
  15.               count: 0
  16.             }
  17.           },
  18.           template: '<div><slot></slot></div>'
  19.         })
  20.         var app = new Vue({
  21.             el: '#app', 
  22.             data: {
  23.             }
  24.         })
  25.     </script>
  26. </body>
  27. </html>

从上面的代码从，我们可以看到，我们先是定义了一个 component: 

  1. Vue.component('study-process', {
  2.   data: function () {
  3.     return {
  4.       count: 0
  5.     }
  6.   },
  7.   template: '<div><slot></slot></div>'
  8. })

在这个component的template中，是这样的： 

  1. template: '<div><slot></slot></div>'

这里就使我们定义的 slot.

然后，我们在调用这个 component的时候，这样： 

  1. <study-process>
  2.     我学习到了Slot 这个章节。
  3. </study-process>

所以，“我学习到了Slot 这个章节。”就好像一个参数那样传入到了 component中， component 发现自身已经定义了 slot, 就会把这个字符串放到slot的位置，然后显示出来。

如下图所示：

slot

named slot

也就是带有名字的slot .

很多时候我们可能需要多个slot. 看下面的例子：

  1. <html>
  2. <head>
  3.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  4. </head>
  5. <body>
  6.     <div id='app'>
  7.         <study-process>
  8.             <p slot='slot_top'>
  9.                 Vuejs 比起别的框架真的简洁好多！
  10.             </p>
  12.                 我学习到了  Slot 这个章节。
  14.             <h5 slot='slot_bottom'>
  15.                 再也不怕H5 项目了~ 
  16.             </h5>
  17.         </study-process>
  18.     </div>
  19.     <script>
  20.         Vue.component('study-process', {
  21.           template: '<div>' + 
  22.           '<slot name="slot_top"></slot>' + 
  23.           '<slot></slot>' + 
  24.           '<slot name="slot_bottom"></slot>' + 
  25.           '</div>'
  26.         })
  27.         var app = new Vue({
  28.             el: '#app', 
  29.             data: {
  30.             }
  31.         })
  32.     </script>
  33. </body>
  34. </html>

上面的代码中， 我们定义了这样的 component: 

  1. Vue.component('study-process', {
  2.   template: '<div>' + 
  3.   '<slot name="slot_top"></slot>' + 
  4.   '<slot></slot>' + 
  5.   '<slot name="slot_bottom"></slot>' + 
  6.   '</div>'
  7. })

其中的 <slot name="slot_top"></slot> 就是一个named slot (具备名字的slot) ,这样，在后面对于 component的调用中：

  1. <p slot='slot_top'>
  2.     Vuejs 比起别的框架真的简洁好多！
  3. </p>

就会渲染在对应的位置了。

slot 的默认值

我们可以为 slot 加上默认值。这样当 “父页面” 没有指定某个slot的时候，就会显示这个默认值了。

例如：

  1. <slot name="slot_top">这里 top slot的默认值 </slot>