vue slot插槽

墨蓝 2022-12-27 01:30 252阅读 0赞

一、介绍：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）效果：父组件插入的内容并没有起作用

![20201207101545233.png][]

2、加上slot：

（1）子组件加上插槽：

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

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

![2020120710285723.png][]

比如改变slot的位置：

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

![20201207103045984.png][]

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）效果：

![20201207103646198.png][]

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

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

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

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

![2020120710404056.png][]

（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>

![20201207104222163.png][]

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）子组件：

（3）效果：

![20201207104508751.png][]

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）效果：

![20201207105005670.png][]

三、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>
      
      <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

[20201207101545233.png]: /images/20221120/9af12de4bb2e4482bec76fdddbff6336.png
[2020120710285723.png]: https://img-blog.csdnimg.cn/2020120710285723.png
[20201207103045984.png]: https://img-blog.csdnimg.cn/20201207103045984.png
[20201207103646198.png]: https://img-blog.csdnimg.cn/20201207103646198.png
[2020120710404056.png]: https://img-blog.csdnimg.cn/2020120710404056.png
[20201207104222163.png]: https://img-blog.csdnimg.cn/20201207104222163.png
[20201207104508751.png]: https://img-blog.csdnimg.cn/20201207104508751.png
[20201207105005670.png]: https://img-blog.csdnimg.cn/20201207105005670.png