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

Unsplash

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

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

// 普通插槽 旧语法
//  父组件
old Nian糕

// 子组件

// 普通插槽 新语法
//  父组件


// 子组件

// 具名插槽 旧语法
//  父组件
old Nian糕

// 子组件

// 具名插槽 新语法
// 父组件


// 子组件

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

// 作用域插槽 旧语法
//  父组件
爱old {{ props.name }}真是太好了

// 子组件


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

// 作用域插槽 新语法
//  父组件


// 子组件


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

运行结果

End of File

---

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