Vue中的solt插槽

一、概念：

插槽就是父组件往子组件中插入一些内容。

二、插槽的种类：

有三种方式，默认插槽，具名插槽，作用域插槽

默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据

单个slot （默认插槽或匿名插槽）

就是没有名字的插槽，一个组件里面只允许存在一个匿名插槽。

    <div class="fa"><h1>父组件</h1><child><p>父组件中写的文本</p></child></div>

子组件内容

父组件在child子组件中放置p标签，子组件中想要显示p标签，就必须放置slot

<div class="child"><h2>子组件</h2><slot>匿名插槽的默认内容</slot></div>

编译结果如下：

child组件slot里的内容会替换成 p标签里面的内容，如果父组件没有在子组件插入内容则会渲染slot里面的默认内容。

2. 具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。

父组件:

 <div class="fa"><h1>父组件</h1><child><div class="son" slot="s1"><span>111</span></div><div class="son" slot="s2"><span>222</span></div><-- 以下是多余的内容，将会自动填充到匿名插槽中--><div class="son"><span>333</span></div></child></div>

子组件：

 <div class="child"><h2>子组件</h2>// s1插槽<slot name="s1"></slot>// s2插槽<slot name="s2"></slot>// 匿名插槽<slot></slot></div>

具名插槽的缩写方式

以#号形式加上插槽名称

 <div class="fa"><h1>父组件</h1><child><div class="son" #s1>...</div></child></div>

3.作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

  <div class="fa"><h1>父组件</h1><child ><template v-slot="props">{{props.item}}</template></child></div>

注意点1：在Vue 2.6+中，如果只存在默认插槽，可以用以上简写法 ,否则必须完整书写： v-slot:default=“props”
注意点2：在Vue 2.6+ 引入了v-slot 指令，在接下来所有的 2.x 版本中 slot 和 slot-scope 还可以使用，但不会出现在 Vue 3.0 中，详细的内容自己查阅官方文档吧。

子组件内容


<template><div class="child"><h2>子组件</h2><ul><li v-for="item of arr" ><slot :item="item"></slot></li></ul></div>
<template/>
<scirpt>data(){return {arr:[111, 222, 333]}}
<scirpt/>

总结

v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。