• Slot
    • 普通的Slot
    • named slot
    • slot 的默认值

    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>