vue3插槽、具名插槽、作用域插槽-足够入门了

vue3 插槽

前言

这篇文章介绍vue组件的插槽！包括：插槽概念，具名插槽，作用域插槽等等，看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 概念

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

举个栗子：

​ eg组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。

我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）。概念不太容易理解，直接上图：

2. 插槽的基本使用

1. 在Left里面加一个slot标签

2 .在app根组件使用子组件里面直接放内容即可

3.这时候插槽的内容就会显示出来啦：

3. 具名插槽（带有name的插槽）

具名插槽以及作用域插槽的基本用法

eg:这里以一个栗子来讲解：

1.子组件 Article.vue 的代码：

2.App.vue代码：

这样就把用户在app自定义的内容通过具名插槽的方式来显示出来了。

栗子运行截图来了：

4. 作用域插槽

在封装组件的过程中，可以为预留的 < slot> 插槽绑定 props 数据，这种带有 props 数据的 < slot> 叫做“作用域插槽”。可以在父组件中传参来显示子组件绑定的数据，示例代码如下：

4.1 解构作用域插槽的 Prop

作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：

4.2 声明以及使用作用域插槽

在封装 MyTable 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。示例代码如下：

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！