vue 组件进阶-插槽

vue 组件进阶

1.组件-插槽

目标

用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

讲解

vue 提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

语法口诀:

1. 组件内用占位
2. 使用组件时夹着的地方, 传入标签替换 slot

总结: 组件内容分发技术, slot 占位, 使用组件时传入替换 slot 位置的标签

2.组件-插槽-默认内容

目标

如果外面不给传, 想给个默认显示内容

讲解

口诀: 夹着内容默认显示内容, 如果不给插槽 slot 传东西, 则使用夹着的内容在原地显示

<slot>默认内容</slot>

小结

1. 如何给插槽设置默认显示内容?

   slot 标签内写好默认要显示内容

2. 什么时候插槽默认内容会显示?

   当使用组件并未给我们传入具体标签或内容时

3.组件-具名插槽

目标

当一个组件内有 2 处以上需要外部传入标签的地方

讲解

传入的标签可以分别派发给不同的 slot 位置

要求: v-slot 一般用跟 template 标签使用 ( template 是 html5 新出标签内容模板元素, 不会渲染到页面上, 一般被 vue 解析内部标签)

v-slot 可以简化成 # 使用

v-bind 可以省略成: v-on: 可以省略成@ 那么 v-slot: 可以简化成#

总结: slot 的 name 属性起插槽名, 使用组件时, template 配合#插槽名 传入具体标签