vue 组件进阶
1.组件-插槽
目标
用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
讲解
vue 提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
语法口诀:
- 组件内用占位
- 使用组件时夹着的地方, 传入标签替换 slot
总结: 组件内容分发技术, slot 占位, 使用组件时传入替换 slot 位置的标签
2.组件-插槽-默认内容
目标
如果外面不给传, 想给个默认显示内容
讲解
口诀: 夹着内容默认显示内容, 如果不给插槽 slot 传东西, 则使用夹着的内容在原地显示
<slot>默认内容</slot>
小结
-
如何给插槽设置默认显示内容?
slot 标签内写好默认要显示内容
-
什么时候插槽默认内容会显示?
当使用组件并未给我们传入具体标签或内容时
3.组件-具名插槽
目标
当一个组件内有 2 处以上需要外部传入标签的地方
讲解
传入的标签可以分别派发给不同的 slot 位置
要求: v-slot 一般用跟 template 标签使用 ( template 是 html5 新出标签内容模板元素, 不会渲染到页面上, 一般被 vue 解析内部标签)
v-slot 可以简化成 # 使用
v-bind 可以省略成: v-on: 可以省略成@ 那么 v-slot: 可以简化成#
总结: slot 的 name 属性起插槽名, 使用组件时, template 配合#插槽名 传入具体标签