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
##如有错误欢迎指正

上一篇:2-6: vue双向绑定的原理是什么?


下一篇:微信小程序 - cb回调(typeof cb == "function" && cb(obj);)