Vue 匿名、具名和作用域插槽的使用

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。 🍉

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 😵

<template>
  <div>
    hello <slot>陌生人</slot>
  </div>
</template>

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

⚠️ slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。

<my-comp>
    oli
</my-comp>

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。 🐼

<template>
  <div>
    <slot name="nav"></slot>
    <br/>
    <slot name="content"></slot>
    <br/>
    <slot name="footer"></slot>
  </div>
</template>

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中：

<template>
  <div>
    <my-comp>
      <template slot="nav">navigator</template>
      <template slot="footer">footer</template>
      <template slot="content">content</template>
    </my-comp>
  </div>
</template>

另外，顺序并不重要，content 在 footer 下方但依然能够按照 slot 定义的顺序渲染：

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。 🤓

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据：

<slot :data="data"></slot>

在组件 data 中创建数据：

export default {
  name: 'MyComp',
  data () {
    return {
      data: { // 内部状态
        username: 'oli'
      }
    }
  }
}

这样就可以在插槽中访问到子元素的数据了：

<template v-slot:default="user">{{user.data.username}}</template>

也可以不书写 default 关键字，默认就是假定对应默认插槽

<template v-slot="user">{{user.data.username}}</template>

使用 v-slot 绑定一个命名空间 user，这样就可以通过 user 对象引用到子组件中传入的数据了

⚠️ 与具名插槽配合时，需要明确书写对应的命名空间：

<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>

# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效

动态插槽名

另外，2.6 版本的 vue 还加入了动态插槽名的功能，用来动态的定义插槽名称：

<template #:[dynamicSlotName]></template>

https://cn.vuejs.org/v2/guide...

JS 菌公众账号

请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦 😊

Vue 匿名、具名和作用域插槽的使用