vue slot插槽

一、介绍：slot可以理解为占位符，在子组件中给父组件站位。

二、举例说明：

1、没有插槽：

（1）父组件：

<template>
 <div>
     我是父组件
    <childOne>
      <p style="color:red">我是父组件插槽内容</p>
    </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    components: {childOne },
}
</script>

（2）子组件：

<template>
 <div class="childOne">
 <div>我是childOne组件</div>
 </div>
</template>

（3）效果：父组件插入的内容并没有起作用

    

2、加上slot：

（1）子组件加上插槽：

<template>
 <div class="childOne">
    <div>我是childOne组件</div>
    <slot></slot>
 </div>
</template>

（2）效果：父组件的插入内容可以显示

   

比如改变slot的位置：

<template>
 <div class="childOne">
     <slot></slot>
    <div>我是childOne组件</div>
 </div>
</template>

  

3、具名插槽：

（2）子组件：在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer

<template>
  <div>
     <div>我是childOne组件</div>
     <slot name="header"></slot>
     <slot></slot>
     <slot name="footer"></slot>
  </div>
</template>

（2）父组件：在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置（当然也不用必须写到template），没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

<template>
 <div>
    我是父组件
  <childOne>
    <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
    <template slot="header">
       <p>我是name为header的slot</p>
    </template>
    <p slot="footer">我是name为footer的slot</p>
  </childOne>
 </div>
</template>

（3）效果：

   

4、插槽的默认内容：可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容。

（1）子组件slot中写内容，父组件不写：

<template>
 <div>
    我是父组件
  <childOne>
  </childOne>
 </div>
</template>

<template>
 <div >
   <slot>我是子组件的插槽</slot>
 </div>
</template>

 

（2）子组件slot中写内容，父组件也写：

<template>
 <div>
    我是父组件
  <childOne>
    我是父组件插槽内容
  </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    components: {childOne },
}
</script>

<template>
 <div >
   <slot>我是子组件的插槽</slot>
 </div>
</template>

  

5、slot父组件传参给子组件：直接绑定

（1）父组件：

<template>
 <div>
    我是父组件
  <childOne>
    <p>{{name}}</p>
  </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    data(){return {name:'张三'}},
    components: {childOne }
}
</script>

（2）子组件：

<template>
 <div >
   <slot></slot>
 </div>
</template>

（3）效果：

  

6、slot子组件传参给父组件：

（1）父组件：在父组件上使用slot-scope属性

<template>
 <div>
   我是父组件
   <childOne>
      <template slot-scope="user">
        <div v-for="item in user" :key="item">
           {{item}}
       </div>
      </template>
   </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    data(){return {name:'张三'}},
    components: {childOne }
}
</script>

（2）子组件：在子组件的slot标签上绑定需要的值：

<template>
 <div>
   我是子组件
   <slot :data="user"></slot>
 </div>
</template>

<script>
export default {
 name: 'slotthree',
 data () {
 return {
  user: [
  {name: '张三', sex: '女'},
  {name: '李四', sex: '男'},
  {name: '王五', sex: '男'}
  ]
 }
 }
}
</script>

（3）效果：

   

三、Element中带插槽的常用组件：组件带插槽，则在引用的时候可以自定义内容

1、el-table：el-table-column带插槽：

 <el-table-column label="用户名" min-width="22" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>

2、el-calendar：日历单元格带插槽：

<el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>

3、el-tab：tab标签插槽，可以自定义tab