开始

在网上看了好多教程，都是迷迷糊糊的，最后还是自己试了下，有个简单的理解，但是我觉得大部分人还是喜欢网上查找教程，所以还是写一写顺便加深自己的记忆。

首先是子组件 test.vue 三种插槽都写了个简单的例子，子组件内容带中括号 []

<div>
    <!-- [默认插槽] -->
    [默认插槽]
    <slot> </slot>
    <br/>

    <!-- [具名插槽] -->
    [adaya 具名插槽]
    <slot name="adaya"></slot>
    <br/>

    <!-- [scope 作用域插槽] -->
    [scope 作用域插槽] 
    <slot name="scope" :data="miao"></slot>
</div>

miao: {
    test: 'tese'
}

然后到父组件使用，父组件的内容会带括号

<test>
  <div>（默认插槽 div）</div>
  
  <div slot="adaya">（adaya具名插槽div）</div>
  
  <div slot="scope" slot-scope="aaa">（作用域插槽div ）<br/> 
    输出aaa------- {{aaa}}  <br/>
    aaa.data------- {{ aaa.data }}<br/>
    aaa.data.test------- {{ aaa.data.test }}<br/>
  </div>
</test>

看下效果图

简单说就这三个点。

默认插槽，直接把内容丢到子组件内而已。

具名插槽，把内容丢到子组件内对应名字的地方。

作用域插槽，把内容丢到子组件内对应名字的地方，但是可以用到这个地方子组件指定的数据。

子组件

    <slot name="scope" :data="miao"></slot>

这里的:data 可以改成 :mydata之类的，然后这个就会作为你再父组件获取数据的关键了。 父组件

  <div slot="scope" slot-scope="aaa">（作用域插槽div ）<br/>

slot="scope" 绑定位置， slot-scope="bbb" 指定使用数据的名字为bbb, mydata就是刚才指定的名字。 使用的话根据上面的图就ok了。

接下来是具体分析。如果上面懂了的话，下面的可以不看。

可能对新人有用吧，老手就别看了，真的都是废话。

老手别看！！！！！！！！！！！！！！！！！！！！

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！！！！！！！！！！！！！！

默认插槽

注释掉父组件具名插槽和作用域插槽的div，发现默认插槽并不会往下面两个插槽位置移动或者多出两个。

再注释掉子组件的匿名插槽，发现也不会跑到具名插槽和作用域插槽里面去。

但是多写一个匿名插槽则会多生生成一个。

具名插槽

具名插槽的，先注释掉父组件匿名插槽和作用域插槽的div。

去掉slot = "adaya", 会发现内容跑到匿名插槽中去了。

改下slot = "adaya1",会发现没有找到对应名字的位置，结果没显示

作用域插槽

作用域插槽呢，其实是在基本的具名插槽的基础上增加了使用子组件数据的方法。

注释掉匿名插槽和具名插槽。

slot slot-scope一定要绑定以及确保数据准确，不然会报错。

修改下slot-scope = "bbb"

会发现报错了，使用aaa的报错了- -，所以这个绑定的就是你使用数据的名称。

修改子组件指定的名称

好了，感觉再说下去都是废话了，越写到后面发现都是废话。希望对新人有用吧，老手就别看了，真的都是废话。