插槽/匿名插槽/具名插槽/v-slot指令

插槽

在子组件中，添加<slot></slot>标签，然后在父组件中使用该子组件时，就可以动态的添加内容。
插槽是可以指定默认内容的，使用组件时，有填充内容，填充内容会把默认内容覆盖；否则显示插槽默认内容。

//子组件  son
<template>
  <div>
    <div>1111</div>
    <slot>我是插槽的默认内容</slot>
  </div>
</template>

//父组件(记得先引入子组件)
<template>
  <div>
    //使用子组件
    <son>
      <div>我是填充内容，会把插槽中的默认内容覆盖</div>
    </son>
  </div>
</template>

匿名插槽

一个组件中可以有多个匿名插槽，在父组件使用这个组件时，有几个匿名插槽，填充内容就会被拷贝几份。
注意：在一个组件内，推荐只使用一个匿名插槽，其他使用具名插槽。

具名插槽

相当于匿名插槽有了名字：<slot name="插槽名">默认内容</slot>。
在父组件使用子组件填充内容时，给填充插槽的标签增加slot属性，并指定对应的插槽名：<div slot="插槽名">填充内容</div>

Vue中v-slot指令

在使用插槽填充内容时，利用v-slot指令替换slot属性。
注意：v-slot指令只能使用在<template>标签上
v-slot指令简写#

//匿名插槽的名字默认default
<son>
  <template v-slot:插槽名>
    <div>这个内容会填充到该插槽对应的位置</div>
  </template>
</slot>

作用域插槽

作用域插槽也就是带数据的插槽，让父组件在填充子组件的插槽时也能使用子组件中的数据。
使用场景：子组件提供数据，父组件决定如何渲染时使用。

//子组件  son
<template>
  <div>
     //1、子组件通过v-bind:数据名称="数据名称"方式来暴露数据
    <slot v-bind:names="names">插槽默认内容</slot>
  </div>
</template>

//父组件(记得先引入子组件)
<template>
  <div>
    //使用子组件
    <son>
      //2、父组件在<template slot-scope="作用域名称">上接收数据
      <template slot-scope="abc">
        //3、父组件通过 作用域名称.数据名称 来使用数据
        <div>我是填充内容{{abc.names}}</div>
      </template>
    </son>
  </div>
</template>

注意：
slot-scope="abc"可用v-slot指令替换，
即：v-slot:default="abc"或者#default="abc"

文章原有字数不喜欢，随便加句话吧，嘿嘿^_