vue2插槽相关 v-slot使用方法 具名插槽和作用域插槽 新旧写法

概念区别

具名插槽：同时有多个插槽时如何区分，为每个插槽指定名字就可以了

作用域插槽：如何在父组件中使用子组件的数据来自定义插槽内容，简单理解：子中插槽默认展示自己内部的数据，但是父想对这个数据做一下拼接展示，那么问题来了，父子是不同的作用域，父如何拿到子的数据呢，作用域插槽就是为了解决这个问题

先看一下旧的：

一、2.6之前已废弃语法：

1.具名插槽：

写法

子组件：为slot指定名字

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：（使用在普通元素上也可以，名字对应，未指定名字则放置在默认插槽）

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

2.作用域插槽：

写法：

子组件：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父级组件：

<slot-example>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>

二、vue 2.6新语法： 引入了v-slot指令（v-slot只能添加在tenplate上）

1.具名插槽：

子组件：为slot指定名字，与旧语法相同
父组件：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  <!-- 也可以明确指定default -->
  <!-- <template v-slot:default> -->
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  <!-- </template> -->
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

2.作用域插槽：

子组件写法：与旧语法相同
父组件写法：

<current-user>
  <template v-slot:default="slotProps">
  <!-- 在这里不可以的直接使用user，因为父级组件无法识别user -->
    {{ slotProps.user.firstName }}
  </template>
</current-user>

具名+作用域完整写法：v-slot:default=“slotProps” 代表：插入到默认插槽，并且绑定了一个slotprops数据可以在插槽中使用，前提是子组件插槽中必须使用v-bind绑定了

总结：

新语法和废弃语法子组件是相同的，name指定插槽名子，v-bind绑定插槽prop，完整写法：

<span>
  <slot name='header' v-bind:user="user" >
    {{ user.lastName }}
  </slot>
</span>

只在父组件上有区别，完整写法：
废弃语法：

<slot-example>
  <template slot="default" slot-scope="slotProps"><!-- 使用两个指令分别指定插槽name和插槽prop -->
    {{ slotProps.msg }}
  </template>
</slot-example>

新语法：

<current-user>
  <template v-slot:default="slotProps"><!-- 使用一个指令同时指定插槽name和插槽prop -->
    {{ slotProps.user.firstName }}
  </template>
</current-user>

新语法通过引入v-slot指令将slot相关的名字指定以及插槽prop整合成了一个指令，但其缩写形式很容易混淆

用法：

v-slot: 是指定插槽name，v-slot= 是指定插槽prop，可以使用一个，也可以同时使用两个

使用建议：（不要过度简写）

1.单纯使用具名插槽： #插槽名 ，如#default #header #footer
2.同时使用具名插槽和作用域插槽： #插槽名=‘插槽prop名’ ，如#default=“slotProps” #header=“user”

特别注意：2.6之后依然支持废弃语法，如果是老项目并且没有明确要求，使用旧语法也未尝不可

详情请查看https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

如有错误欢迎指正