vue插槽slot介绍与使用
1.什么是插槽?
插槽就是相当于在子组件里提供一个占位符给父组件使用,用<slot></slot>
表示,在父组件可以在这个占位符中填充模板代码组件等,填充在子组件当中。插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。
2.插槽的使用方法(默认插槽):
在子组件中定义
父组件中在组件内部可以定义插槽的内容可以是html代码也可以是其他组件;在子组件中,你可以定义多个默认插槽,并在子组件中决定这些默认插槽的位置,父组件要插入的内容,都会被填充到这些默认的插槽中:
3.插槽的使用方法(具名插槽):
在子组件中定义插槽时,给对应的插槽起个对应的名字<slot name="slotName1"></slot>
,子组件可以定义多个同名的具名插槽:
在父组件中可以根据声明名字来填充插槽里面的内容。
4.插槽的使用方法(作用域插槽):
作用于插槽是实现在子组件自己可以控制自己要显示什么内容
父组件中可以通过v-slot
来进行获取子组件想要显示的内容
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」