VUE中插槽slot的基本用法，具名插槽，插槽作用域

1.插槽的基本使用

//父组件
<div id="app">
  <cpn></cpn>
  <cpn><span>哈哈哈</span></cpn> 
</div>
//子组件
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件, 哈哈哈</p>
//插槽内部的内容为插槽默认值
    <slot><button>按钮</button></slot>
  </div>
</template>

结果：

插槽没有默认值时：

• 父组件调用子组件时，不传递内容，则无变化只显示子组件的内容
• 父组件调用子组件时，传递内容，则传递的内容渲染在插槽的位置

插槽有默认值时：

• 父组件调用子组件时，不传递内容，则显示插槽的默认内容
• 父组件调用子组件时，传递内容，则传递的内容替代插槽的默认内容

2.具名插槽

<div id="app">
  <cpn><button slot="left">返回</button></cpn>
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button>没名字</button></cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
    <slot></slot>
  </div>
</template>

结果：

 插槽有默认值时：

当父组件传递对应插槽的内容时，用该内容替换该插槽的默认值，没有传递值的插槽显示默认值

 插槽没有默认值时：

父组件传递对应插槽的内容时，替换该插槽默认内容，没有传递不显示。

3.作用域插槽的案例

场景：子组件的插槽的默认值根据子组件内部数据展示，父组件调用子组件时，想要更换插槽中展示的样式，但是使用子组件的数据？

解决：在子组件插槽中将数据传递出去，父组件在调用子组件时，通过slot-scope=''slot''来获取插槽对象，再获取对应的数据:

<div id="app">
  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

子组件插槽中通过 :data=planguages 将子组件的planguages传递出去

父组件中通过slot-scope="slot" 获取子组件插槽对象赋值给"slot",就可以通过slot.planguages获取子组件传递出来的值

注意事项：

子组件的插槽若加上class,或者v-if登修饰符时，最好在<slot></slot>外面加上一层div,因为实际渲染的过程中，子组件中的<slot></slot>会被替换掉，加在上面的内容可能失效。