vue中的匿名插槽和具名插槽

vue中的插槽

想要彻底搞清楚vue的插槽,首先我们要清楚什么是插槽?为什么要使用插槽?怎么使用插槽?

首先插槽可以理解成生活中的相框,和相片的关系

要想把一张美丽的照片放入相框,我们需要具备两个条件

一个相框: 子组件中用来占位的<slot></slot>,相当于子组件挖了一个坑,这个坑需要父组件传东西过来填充

一张照片:父组件传递的内容

相信前面的介绍,你大概知道了插槽是什么

知道了什么是东西,接下来我们一起来看一下插槽的作用

在使用插槽的时候有人会有疑问,为什么不直接在子组件搞好模板,父组件直接使用呢?

*首先父组件直接使用子组件的模板,有时候我们会发现,如果我们想要拓展业务的时候,非常的不好拓展,一旦项目庞大起来,非常不好维护.此时插槽就显得非常重要

插槽可以达到–子组件非常的灵活,父组件需要子组件展示什么就可以传递什么,主要以下面几个方面:

• 组件通过插槽传入自定义结构
• 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
• vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

基本使用如下

掌握具名插槽的使用,我们会发现插槽这么方便,我们能不能多传几个呢?
答案是可以的,但是这里需要这么才能满足我们的需求呢?

语法如下:

定义： <slot name="xxx">

使用：

-   <template #xxx></template>;
-   <template v-slot:xxx></template>

我们需要在占位的时候给这个位置取个名字,就好比你约你对象去吃饭,定了个饭店
然后我们在父组件传内容的时候,需要用template包裹起来 把饭店的名字写进去

具体的使用如下

原理:

1. 传入的标签可以分别派发给不同的slot位置
2. v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)

补充:

• v-slot可以简化成#使用
• v-bind可以省略成:
• v-on: 可以省略成@
• v-slot: 可以简化成#

小结:

1. slot有可以设置多个
2. 定义组件时：slot的name属性起插槽名
3. 使用组件时, template配合#插槽名传入具体html标签或组件