Vuejs进阶知识(十九)【slot】

梦里梦外; 2021-06-26 16:06 509阅读 0赞

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

## 普通的`Slot` ##

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

<html>
    <head>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id='app'>
    		<study-process>
    			我学习到了Slot 这个章节。
    		</study-process>
    	</div>
    	<script> Vue.component('study-process', { data: function () { return { count: 0 } }, template: '<div><slot></slot></div>' }) var app = new Vue({ el: '#app', data: { } }) </script>
    </body>
    </html>

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

Vue.component('study-process', { 
      data: function () { 
        return { 
          count: 0
        }
      },
      template: '<div><slot></slot></div>'
    })

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

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

这里就使我们定义的 `slot`.

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

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

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

如下图所示：  
![在这里插入图片描述][20181226223420824.png]

## `named slot` ##

也就是带有名字的`slot` .

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

<html>
    <head>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
    	<div id='app'>
    		<study-process>
    			<p slot='slot_top'>
    				Vuejs 比起别的框架真的简洁好多！
    			</p>
    
    				我学习到了  Slot 这个章节。
    
    			<h5 slot='slot_bottom'>
    				再也不怕H5 项目了~ 
    			</h5>
    		</study-process>
    	</div>
    	<script> Vue.component('study-process', { template: '<div>' + '<slot name="slot_top"></slot>' + '<slot></slot>' + '<slot name="slot_bottom"></slot>' + '</div>' }) var app = new Vue({ el: '#app', data: { } }) </script>
    </body>
    </html>

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

Vue.component('study-process', { 
      template: '<div>' + 
      '<slot name="slot_top"></slot>' + 
      '<slot></slot>' + 
      '<slot name="slot_bottom"></slot>' + 
      '</div>'
    })

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

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

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

## `slot` 的默认值 ##

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

例如：

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

[20181226223420824.png]: /images/20210626/b3c427d835be42cea4c515b1e92d8a88.png