slot插槽使用与传参
使用规则:
子组件: 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>
效果:
ps:父组件在使用子组件具名插槽获取参数是:<template v-slot:名称="参数对象"></template> ,如果插槽名称是变量,则可以<template v-slot:[名称变量]="参数对象"></template>,v-slot必须写在template这个元素上,不可以是其他标签。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」