vue中插槽（slot）的使用

刚学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的值渲染出来了哟！！，动态改变它的值也会变化哟！！

关键是，在子组件内动态改变它的值，父组件内也会动态改变！！！！！（这是父子组件通信的一个新模式啊！！！！）