标签：slot 插槽 几种 组件 scope div data1

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。