vue中的slot插槽有3种：

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

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

 

1. 默认插槽

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

子组件：

 1 // child.vue
 2 
 3 <template lang="pug">
 4 .child 
 5   span 你好，我是：
 6   slot
 7 </template>
 8 <script>
 9 export default {
10   data() {
11     return {};
12   }
13 };
14 </script>
15 <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>。

子组件：

 1 <template lang="pug">
 2 .child 
 3   span 你好，我是：
 4   slot(name="customName")
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {};
10   }
11 };
12 </script>
13 <style lang="scss" scoped></style>

父组件：

 1 <template lang="pug">
 2 .parent 
 3    Child   
 4      div(slot="customName") 我是插槽，自定义名称
 5 
 6 </template>
 7 <script>
 8 export default {
 9   data() {
10     return {};
11   }
12 };
13 </script>
14 <style lang="scss" scoped></style>

 

3. 作用域插槽

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

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

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

3.1 默认插槽传参方式

子组件：

 1 <template lang="pug">
 2 .child 
 3   span 你好，我是：
 4   slot(:data1="data1" :data2="data2")
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {
10         data1:"参数1",
11         data2:"参数2",
12     };
13   }
14 };
15 </script>
16 <style lang="scss" scoped></style>

父组件：

<template lang="pug">
.parent
    Child    
        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>

子组件：

 1 <template lang="pug">
 2 .child 
 3   span 你好，我是：
 4   slot(name="customName" :data1="data1" :data2="data2")
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {
10         data1："参数1",
11         data2："参数2",
12     };
13   }
14 };
15 </script>
16 <style lang="scss" scoped></style>

父组件：

 1 <template lang="pug">
 2 .parent
 3     // 插槽名用变量方式
 4     Child    
 5          template(v-slot:[slotName]="scope") 
 6              div {{scope.data1}}
 7              div {{scope.data2}}
 8     // 插槽名不是变量
 9     Child    
10          template(v-slot:customName="scope") 
11              div {{scope.data1}}
12              div {{scope.data2}}
13 </template>
14 <script>
15 export default {
16   data() {
17     return {
18         slotName:"customName"
19     };
20   }
21 };
22 </script>
23 <style lang="scss" scoped></style>    

 

标签：slot,插槽,几种,组件,scope,div,data1
来源： https://www.cnblogs.com/grow-up-up/p/16534712.html