插槽slot的使用

一、默认插槽

1.父组件中没有填坑内容时

在子组件中用slot占个位置

<template>
  <div>子组件:
    <slot>父组件中没有填坑内容时的默认展示</slot>
  </div>
</template>

父组件：Children中没有填坑内容

<template>
  <div>
    <Children></Children>
  </div>
</template>

结果：

2.父组件中有填坑内容

<template>
  <div>
    <Children>填坑内容</Children>
  </div>
</template>

此时子组件中的默认展示内容则会自动变为父组件中的填坑内容

结果：

二、具名插槽

为子组件中的坑取名字

<template>
  <div>子组件:
    <!-- 有名字的坑 -->
    <slot name="one">one，默认内容</slot>
    <slot name="two">two，默认内容</slot>
  </div>
</template>

父组件中填坑时在template中用v-slot:名字，为每个坑填上内容（tips：v-slot：可简写为#，eg：#one）

<template>
  <div>
    <Children>
      <template v-slot:one>
        <div>one的内容</div>
      </template>
      <template v-slot:two>
        <div>two的内容</div>
      </template>
    </Children>
  </div>
</template>

结果：

 

三、作用域插槽

　　作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据进行不同的展现和填充内容。在标签中用slot-scope或者v-slot来接受数据

子组件：

<template>
  <div>
    <div>子组件：</div>
    <ul>
      <li v-for="(item,index) in items" :key="index">
        <slot :slotItem="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      items:['lihua','wangwu','zengyi','wangmei']
    }
  }
}
</script>

 

父组件：

<template>
  <div>
    <Children>
      <!-- <template v-slot="a">
        <p>{{a.slotItem}}</p>
      </template> -->
      <template slot-scope="a">
        <p>{{a.slotItem}}</p>
      </template>
    </Children>
  </div>
</template>

如果slot有name的话，父组件中slot-scope=“a”则要改为v-slot：name=‘a’或#name=‘a’

结果：