slot插槽使用与传参

2022-01-22 15:34:19 阅读：417 来源： 互联网

使用规则：

子组件： slot ( name="定义插槽的名称" arg1="参数1" ) 正常传props

父组件： template ( v-slot:插槽名称="scope" ) ；scope为实参，它是一个对象 ，里面的每个字段是子组件传过来的props，此时scope即为：{arg1："参数1"}

例子如下：

子组件：

 1 // ChildrenComponent
 2 
 3 
 4 .children-component
 5   div 我是子组件
 6   slot(name="bottom" arg1="参数1" arg2="参数2" :arg3="arg3")
 7 
 8 
 9   export default {
10     data(){
11       return {
12         arg3:"我是参数3"
13       }
14     }
15 
16   }

父组件：

1 <template lang="pug">
2 .page
3     div 下面如何使用子组件的插槽以及参数
4     ChildrenComponent
5         template(v-slot:bottom="scope") // v-slot:插槽名称="实参对象"

6            div {{scope.arg1}}
7            div {{scope.arg2}}
8            div {{scope.arg3}}
9 </template>

效果：

标签：slot,传参,插槽,arg1,组件,scope,div
来源： https://www.cnblogs.com/grow-up-up/p/15834086.html

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

ICode9

slot插槽使用与传参