目录
插槽 - 默认插槽
作用:让组件内部的一些 结构 支持 自定义
需求: 将需要多次显示的对话框, 封装成一个组件
问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办?
插槽基本语法:
- 组件内需要定制的结构部分,改用占位
- 使用组件时, 标签内部, 传入结构替换slot
场景:当组件内某一部分结构不确定,想要自定义怎么办?
用插槽 slot 占位封装
使用:插槽使用的基本步骤?
- 先在组件内用 slot 占位
- 使用组件时, 传入具体标签内容插入
插槽 - 后备内容(默认值)
插槽后备内容:封装组件时,可以为预留的 `` 插槽提供后备内容(默认内容)。
l 语法: 在 标签内,放置内容, 作为默认显示内容
l 效果:
l 外部使用组件时,不传东西,则slot会显示后备内容
如何给插槽设置默认显示内容?
在slot标签内,写好后备内容
什么时候插槽后备内容会显示?
当使用组件并未给我们传入具体标签或内容时
插槽 - 具名插槽
需求:一个组件内有多处结构,需要外部传入标签,进行定制
默认插槽:一个的定制位置
具名插槽语法:
具名插槽简化语法:
组件内 有多处不确定的结构 怎么办?
具名插槽
- slot占位, 给name属性起名字来区分
- template配合 v-slot:插槽名 分发内容
v-slot:插槽名 可以简化成什么?
#插槽名
插槽 - 作用域插槽
作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用。
场景:封装表格组件
- 父传子,动态渲染表格内容
- 利用默认插槽,定制操作列
- 删除或查看都需要用到 当前项的 id,属于 组件内部的数据 通过 作用域插槽 传值绑定,进而使用
作用域插槽的作用是什么?
可以给插槽上绑定数据,供将来使用组件时使用
标签:slot,14,作用域,插槽,内容,vue2,标签,组件 From: https://blog.csdn.net/2301_81051419/article/details/143746103作用域插槽使用步骤?
- (1)给 slot 标签, 以 添加属性的方式传值
- (2)所有属性都会被收集到一个对象中
- (3)template中, 通过 ` #插槽名= "obj" ` 接收