使用规则:
子组件: 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>
效果: