标签：slot 作用域 插槽 slotProps 语法 vue2 组件

概念区别

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

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

先看一下旧的：

一、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绑定了

##总结：新语法和废弃语法只在父组件上有区别，完整写法：
废弃语法：

<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整合成了一个指令，但其缩写形式很容易混淆

使用建议：（不要过度简写）
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
##如有错误欢迎指正

标签：slot,作用域,插槽,slotProps,语法,vue2,组件
来源： https://blog.csdn.net/qq_41348755/article/details/122809523

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。