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

沈学凯@

已于 2022-02-07 15:43:16 修改

阅读量2.8k

点赞数

分类专栏： vue 文章标签：前端 javascript vue

于 2022-02-07 15:27:18 首次发布

本文链接：https://blog.csdn.net/qq_41348755/article/details/122809523

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概念区别

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

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

先看一下旧的：

一、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>