vue插槽

一、什么是插槽？

插槽用于父组件在子组件中占位，在子组件中预留出父组件向子组件传的内容的位置，编译好之后的html中不会显示出插槽的存在。

简单一点说插槽是一个透明的大小不固定的盒子，这个盒子里面展示的是什么内容，由父组件来定。如果定义了插槽，但是父组件没有向插槽传内容，则插槽显示自己原有的东西；如果父组件向插槽传了内容，哪怕是一个空的div，子组件中对应插槽的内容也会被完全替换成父组件传的内容。

插槽.png

二、插槽分类

1、具名插槽

顾名思义，具名插槽表示这个插槽含有名字。父组件在向子组件传显示的内容时可以指定这段内容放在哪个插槽里面。在vue2.5之前和2.5及以后的插槽使用方式是不同的。如果你问“我用的是2.5及以后的版本，可不可以使用之前的方式呢？”，大声的告诉你，Don't worry，这个是兼容的，你还是可以放心的用旧方法进行验证。示例见匿名插槽示例（两者一起展示）

2、匿名插槽

这是一个无名氏（忽然想到上学期间经常在作文书里面看到的一个叫佚名的作者）

嗯哼.jpg

父组件中向子组件传递的内容如果没有指定放在哪个具名插槽里，则通通被放在匿名插槽里。

如果我在父组件中有很多具名插槽穿插在一段html中，那么除了具名插槽之外的其他内容全部放到匿名插槽中，展示顺序不变，请见示例代码及结果。

写到这里想到，一个子组件中如果有多个匿名插槽，会发生什么？待我验证一下，结果显示：父组件中向子组件传递的内容中除了具名插槽的内容之外，其他内容全部放到匿名插槽中，有几个匿名插槽就会显示几次。

<pre>
<div>
   version<=2.5
   <slot-example v-for="item in list" :key="item">
       <div>显示在匿名插槽</div>
       <div slot="slotExample">
       <span>{{item}}</span>
       </div>
   </slot-example>
</div>
<br />
<div style="border-top:1px black dashed;" ></div>
<br />
<div>version>2.5</div>
<new-slot-example>
   <template v-slot:headerslot>
       <h1>This is the Header of this div</h1>
   </template>
   <p>This is main Of this Div</p>
   <template v-slot:footerslot>
       <h1>This is the Footer of this div</h1>
   </template>
   <p>This is main of this div 2</p>
</new-slot-example>

var slotExample = {
   template: "<div><ul><li><slot><p>匿名插槽原有内容</p></slot><slot name='slotExample'><p>插槽中自己的内容</p></slot></li></ul></div>"
};
var newSlotExample = {
   template: "<div class='container'>"
               + "<header>"
                   + "<slot name='headerslot'><p>header自带内容</p></slot>"
               + "</header>"
               + "<main>"
                   + "<slot></slot>"
               + "</main>"
               + "<footer>"
                   + "<slot name='footerslot'></slot>"
                   + "<slot></slot>"  
               +"</footer>"
           + "</div>";
</pre>

具名插槽/匿名插槽效果图1.png

具名插槽/匿名插槽效果图2.png

3、作用域插槽 slot-scope

父组件可以拿到子组件的数据, 子组件可以在slot标签上绑定属性值；
在两层父子组件之间类似于$emit()传值；
作用域插槽更多应用场景时三层及以上父子组件之间。

<pre>
<h3>作用域插槽</h3>
<!--作用域插槽可以将子组件的属性值传给父组件，slot-scope给当前插槽域命名-->
<scope-slot-example>
    <template slot-scope="slot">
        从子组件中获取的值{{slot.nickName}}
    </template>
</scope-slot-example>
<hr />
// 作用域插槽将插槽子组件绑定的属性传递给父组件
var scopeSlotExample = {
    template: "<div style='background:#e1d5d5'>"
                    + "<h3>这里是作用域插槽子组件</h3><br/>"
                    + "<slot :nickName='sonsnickName'></slot>"
                + "</div>",
    data() {
        return {
            sonsnickName: "son's nickName"
        }
    }
};
</pre>

作用域插槽.png

最后编辑于：2021.04.02 14:40:41