什么是插槽

官方解释:Vue 实现了一套内容分发的 API,将 元素作为承载分发内容的出口
实际上说:的出现就是为了父组件可以冠冕堂皇的往子组件中插入内容。
插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。

插槽与props的区别

props是父组件向子组件传输属性和方法。
而插槽是子组件向父组件进行传输属性、方法还可以是标签的内容(例如:带内容的button按钮)甚至是组件。

插槽的分类

默认插槽

默认插槽又叫单个插槽或者匿名插槽。

父组件中:
        <Category>
           <div>html结构1</div>
        </Category>
子组件中:Category
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽(将slot标签上加入name属性)

父组件指明放入子组件的哪个插槽slot="footer",如果是template可以写成v-slot:footer
注意:slot 可以用在任何元素上,v-slot 只能添加在template模板上。

父组件内容
<template>
  <div>
    <h3>我是一个父组件</h3>
    <!--子组件内容 ↓ -->
    <child>
      <div slot="index1">这里是子组件111111</div>
      <div slot="index2">这里是子组件22222222</div>
      <div>这里是匿名插槽</div>
    </child>
  </div>
</template>

子组件内容
<template>
  <div>
    <h5>我是子组件</h5>
    <slot name="index1"></slot>
    <slot name="index2"></slot>
    <slot name="index3"></slot>
    <slot></slot>
  </div>
</template>

zCoQu4.png
在上面示例中,可以看出父组件通过模板上添加slot属性与具名插槽的进行关联,没用name属性的slot展示匿名插槽。

作用域插槽

这玩意就是狗屁说的挺玄乎,说白了就是这个slot不是只能往子传父数据吗?你要是在父模板里需要子模板的数据怎么办呢?这就需要作用域插槽。
vue给了三种,

默认插槽作用域传值。

zCT0zT.png
上段代码中我们在子组件中 slot 标签上添加了一些自定义属性,属性值就是我们想要传递给父组件的一些内容。在父组件 App.vue 中通过 v-slot="slotProps"等形式接收子组件传毒过来的数据,slotProps 的名字是可以任意取的,它是一个对象,包含了所有传递过来的数据。
需要注意的是,子组件传递过来的数据只能在子组件这个标签内使用。

解构写法

哎?我不会,没学过解构,以后再写。

具名插槽作用域传值

具名插槽作用域之间的传递其实默认插槽作用域传值原理是一样的,只不过写法不一样罢了。

child.vue 代码如下:

<template>
  <div class="child-box">
    <p>我是子组件</p>
    <slot name="header" text="我是子组件小猪课堂" :count="1"></slot>
  </div>
</template>
App.vue 代码如下:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <template #header="{ text, count }">
      <div>{{ text }}---{{ count }}</div>
    </template>
  </child>
</template>

上段代码中我们给 slot 添加了一个 name,在父组件中接收数据的时候不在采用 v-slot=""形式了,而是直接再插槽内容上采用#header=""形式,当时这是简写形式,你也可以写为:v-slot:header="" 这个#header就是 #name的名字。你要是子组件的的name是dahuang那么你也可以写#dahuang