vue中插槽slot的使用

一、插槽 ：slot

1、使用情况：当子组件在父组件中当标签使用时，如果子组件内部需要进行嵌套一些代码内容时，这时候就需要在子组件内插入插槽。

例子：父组件：

其中<home-com>标签内是需要嵌套的代码，若直接这样写是无法在页面中显示的，

<template>
<div id="app">
<header-com></header-com>
<home-com>
<p>11</p>
<p>222</p>
<p>333</p>
<h3 slot="box">小王</h3>
<h3 slot="con">小皮</h3>

<ul slot="list">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>ddd</li>
</ul>
</home-com>
</div>
</template>

子组件：

<template>
<div class="home content">
<slot name="box"></slot>
home
<slot></slot>

<slot name="con"></slot>
<slot name="list"></slot>
</div>
</template>

其中，给slot 标签增加name属性，并按照顺序排序，会控制子组件标签中的代码内容的显示顺序。

浏览器显示顺序为：（截图好麻烦，还得导入，直接上文字喽。。。）

小王
home
11

222

333

小皮
aaaa
bbbb
cccc
ddd

总结一波：在子组件中插入slot标签，可以接收在父组件中子组件标签内的所有内容。如果给子组件标签内容中的内容增加slot属性，并子组件中给slot增加name属性，可以按照书写顺序排序。

转载于:https://www.cnblogs.com/-roc/p/9956219.html

• 点赞
• 收藏
• 分享
• 文章举报