ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

slot插槽使用与传参

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

标签:slot 传参 插槽 arg1 组件 scope div


使用规则:

子组件:  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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有