slot插槽有几种

vue中的slot插槽有3种：

默认插槽、具名插槽、作用域插槽。

插槽的作用就是父组件在使用子组件的时候，可以对子组件的某些地方内容进行自定义。

 

1. 默认插槽

子组件在代码块的某个地方放置 <slot></slot> ，然后父组件在使用子组件时，直接在子组件下面自定义内容即可。

子组件：

// child.vue

<template lang="pug">
.child 
  span 你好，我是：
  slot
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped></style>

父组件：

<template lang="pug">
.parent
    Child
        div 我是插槽，自定义名称
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped></style>

效果图：

 

 

2. 具名插槽

具名插槽与默认插槽有一点不一样，那就是需要给【slot】标签一个【name】属性，即子组件定义插槽<slot name="自定义名称"></slot>，父组件使用插槽 <template slot="自定义名称"></template>。

子组件：

<template lang="pug">
.child 
  span 你好，我是：
  slot(name="customName")
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped></style>

父组件：

<template lang="pug">
.parent 
   Child   
     div(slot="customName") 我是插槽，自定义名称

</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped></style>

 

3. 作用域插槽

作用域插槽比上面2种插槽更丰富，因为它不仅仅有占位的功能，还有数据传参的功能。【忌：传参时参数名别用name，与具名插槽的name属性冲突】

我个人觉得作用域插槽更像是默认插槽和具名插槽的扩展属性，就是将上面2种插槽扩展一下支持传参功能，不应该单拿出来算第三种插槽类型。

在slot上传参，就跟普通组件传属性是一样的，<slot :arg1="" :arg2=""></slot>

3.1 默认插槽传参方式

子组件：

<template lang="pug">
.child 
  span 你好，我是：
  slot(:data1="data1" :data2="data2")
</template>
<script>
export default {
  data() {
    return {
        data1:"参数1",
        data2:"参数2",
    };
  }
};
</script>
<style lang="scss" scoped></style>

父组件：

<template lang="pug">
.parent
    Child 
　　　　　// 【slot-scope="scope"】这种写法被废弃掉了，最好使用 v-slot="scope"或者 v-slot:default="scope"   
        div(slot-scope="scope") 
              div {{scope.data1}}
              div {{scope.data2}}
</template>
<script>
export default {
  data() {
    return {
    };
  }
};
</script>
<style lang="scss" scoped></style>

 

 

3.2 具名插槽传参方式 （ps：https://www.cnblogs.com/grow-up-up/p/15834086.html）

具名插槽子组件传参与默认插槽中的子组件传参是一样的，都是 :属性名="属性值"，<template v-slot:插槽名称="参数对象"></template>

子组件：

<template lang="pug">
.child 
  span 你好，我是：
  slot(name="customName" :data1="data1" :data2="data2")
</template>
<script>
export default {
  data() {
    return {
        data1："参数1",
        data2："参数2",
    };
  }
};
</script>
<style lang="scss" scoped></style>

父组件：

<template lang="pug">
.parent
    // 插槽名用变量方式
    Child    
         template(v-slot:[slotName]="scope") 
             div {{scope.data1}}
             div {{scope.data2}}
    // 插槽名不是变量
    Child    
         template(v-slot:customName="scope") 
             div {{scope.data1}}
             div {{scope.data2}}
</template>
<script>
export default {
  data() {
    return {
        slotName:"customName"
    };
  }
};
</script>
<style lang="scss" scoped></style>