vue中的插槽
想要彻底搞清楚vue的插槽,首先我们要清楚什么是插槽?为什么要使用插槽?怎么使用插槽?
首先插槽可以理解成生活中的相框,和相片的关系
要想把一张美丽的照片放入相框,我们需要具备两个条件
一个相框: 子组件中用来占位的<slot></slot>,相当于子组件挖了一个坑,这个坑需要父组件传东西过来填充
一张照片:父组件传递的内容
相信前面的介绍,你大概知道了插槽是什么
知道了什么是东西,接下来我们一起来看一下插槽的作用
在使用插槽的时候有人会有疑问,为什么不直接在子组件搞好模板,父组件直接使用呢?
*首先父组件直接使用子组件的模板,有时候我们会发现,如果我们想要拓展业务的时候,非常的不好拓展,一旦项目庞大起来,非常不好维护.此时插槽就显得非常重要
插槽可以达到--子组件非常的灵活,父组件需要子组件展示什么就可以传递什么,主要以下面几个方面:
- 组件通过插槽传入自定义结构
- 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
- vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
基本使用如下
掌握具名插槽的使用,我们会发现插槽这么方便,我们能不能多传几个呢? 答案是可以的,但是这里需要这么才能满足我们的需求呢?
语法如下:
定义： <slot name="xxx">
使用：
- <template #xxx></template>;
- <template v-slot:xxx></template>
我们需要在占位的时候给这个位置取个名字,就好比你约你对象去吃饭,定了个饭店 然后我们在父组件传内容的时候,需要用template包裹起来 把饭店的名字写进去
具体的使用如下
原理:
- 传入的标签可以分别派发给不同的slot位置
- v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)
补充:
- v-slot可以简化成#使用
- v-bind可以省略成:
- v-on: 可以省略成@
- v-slot: 可以简化成#
