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

Unsplash

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

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

vue.js

0 人点赞