Vue3.0 组件的核心概念_插槽

Unsplash

Vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slotslot-scope,并且之后的 Vue 3.0 也会使用新语法,这并不是仅写法的不同,还包括了性能的提升

插槽分为普通插槽和作用域插槽,普通插槽为父组件传递数据/元素/组件给子组件,而子组件定义 <slot> 接收,当插槽有多个的时候,需要使用具名插槽 <slot name="xxx">,用于将数据绑定在指定的插槽

//  父组件
<p slot="item">old Nian糕</p>

// 子组件
<slot name="item" />
// 父组件
<template v-slot:item>
  <p>new Nian糕</p>
</template>

// 子组件
<slot name="item" />

作用域插槽为子组件 <slot> 绑定属性,传递数据给父组件,父组件通过 v-slot:xxx="props" 接收子组件传递的属性

//  父组件
<p slot="love" slot-scope="props">爱{{ props.name }}真是太好了</p>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}
//  父组件
<template v-slot:love="props">
  <p>爱{{ props.name }}真是太好了</p>
</template>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}

运行结果

End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券