刚学vue的时候，曾经学习过slot插槽的使用，但是后面接触的不多，因为之前我还没使用element-ui。。。
但是使用了element-ui之后，里面的许多组件，有时候会使用插槽，为了巩固一下插槽，写一个笔记
首先，插槽有什么作用呢？
我们先来自定义一个组件：
<template>
<div>
{{text}}
</div>
</template>
<script>
export default {
data(){
return {
text:"自定义组件"
}
}
}
</script>
然后在其它组件内引入（script中）
import Lala from '@/components/lala.vue';
再声明一下
components:{
Lala
},
之后，在template中使用即可
<Lala></Lala>
这样，会在这个页面中显示“自定义组件”这些文字，代表组件成功引入。
但是当我们想在<Lala></Lala>标签中间添加其它内容时，它并不会显示在页面中
例如：
<Lala>我是在组件标签中写的内容</Lala>
我们发现，页面汇总并没有显示出我标签汇总写入的内容。而slot插槽可以让其显示，我们只需要在lala的组件模板中添加这样的代码
<template>
<div>
{{text}}
<slot></slot>
</div>
</template>
此时，标签内的内容就显示出来了，这就是slot插槽的作用，给组件添加自定义内容
以上这种插槽叫匿名插槽，也就是，你在自定义标签中写入的内容都用这个slot标签显示出来
那么相对的，还有具名插槽，顾名思义，就是有名字的插槽
首先在自定义组件模板中添加
<template>
<div>
{{text}}
<div>以下是匿名插槽</div>
<slot></slot>
<div>以下是具名插槽slot1</div>
<slot name="slot1"></slot>
<div>以下是具名插槽slot2</div>
<slot name="slot2"></slot>
</div>
</template>
以上是，在模板汇总加上了具名插槽，就是在slot标签上加个name属性，那么叫什么名，这个插槽就交什么名
在使用的页面内，这样写
<Lala>
<template>
我是在组件标签中写的内容
</template>
<template slot="slot1">slot1内容</template>
<template slot="slot2">slot2内容</template>
</Lala>
这样，就会显示出对应插槽模板中的内容，如果不传对应名字的插槽内容，就不显示，当然，如果像上面的代码一样，自定义组件即使用了匿名插槽，又使用了具名插槽，那么，除了具名插槽以外的模板，统统用匿名插槽显示，说到这，感觉这slot插槽就像个视口。当然一个模板中要不使用匿名插槽，要不具名插槽，最好不要匿名和具名都使用。
接下来介绍一下作用域插槽 ！！！！
先看看怎么来定义作用域插槽
<template>
<div>
{{text}}
<div>以下是作用域插槽</div>
<slot say="你好"></slot>
</div>
</template>
就是在slot标签上自定义一个属性，我取名叫say，让后赋个值。（也可以:绑定该组件内data中的属性！！！）
下面看看在引用它的页面内如何使用
<Lala>
<template slot-scope="a">
{{a}}
</template>
</Lala>
在template模板上加一个slot-scope属性 随便赋个值，这里叫a
在模板汇中就可以渲染这个值了
渲染出来是这样的
{ "say": "你好" }
好强大啊，这又是一种子组件向父组件传值的方式！！！！
它还可以和具名插槽配合使用！！！！！！！！！！！！！！！！！！！！！！！！！！！
自定义组件模板：
<template>
<div>
{{text}}
<div>以下是作用域插槽slot1</div>
<slot name="slot1" say="你好"></slot>
</div>
</template>
在引用的页面中
<Lala>
<template slot="slot1" slot-scope="a">
{{a}}
</template>
</Lala>
真得劲！！！！！！！
还有呢！！！！！！！！！！结合props会更强大！！！！看代码：
我在引用它的页面内用props给它传个值，这个值是父组件内的值！！！
<Lala :propObj="tableData"> <template slot="slot1" slot-scope="a"> {{a}} </template> </Lala>
在自定义组件内用props接收住，再传到父组件！！！
<template>
<div>
{{text}}
<div>以下是作用域插槽slot1</div>
<slot name="slot1" :say="propObj"></slot>
</div>
</template>
<script>
export default {
props:['propObj'],//外部传值
}
</script>
这样将父组件中tableData的值渲染出来了哟！！，动态改变它的值也会变化哟！！
关键是，在子组件内动态改变它的值，父组件内也会动态改变！！！！！（这是父子组件通信的一个新模式啊！！！！）