vue3.0 插槽（vue 插槽详解）



Vue.js是一款流行的前端框架，提供了强大的组件化功能。其中，插槽(Slot)技术是一种用于组件化开发的重要技术，允许我们在组件中定义一些占位符，然后在使用组件时，通过插槽来传递内容。插槽的灵活性使得我们可以轻松地定制组件的外观和行为，可以帮助我们更好地处理组件的可复用性和灵活性。

在Vue中，插槽的使用方式可以分为三种：默认插槽、具名插槽和作用域插槽。

默认插槽是最简单的插槽形式，它允许我们将组件的内容传递到组件内部的一个占位符中。在组件的模板中使用定义默认插槽，然后在使用组件时，将内容传递给这个插槽。

在上面的代码示例中，表示一个默认插槽，将传递给Com01组件的内容放置在这个插槽中。如果把p标签那一行注释掉，就会显示默认内容。

具名插槽允许我们在组件中定义多个插槽，并且可以根据插槽的名称来传递内容。在组件的模板中使用定义具名插槽，然后在使用组件时，使用或者来传递内容给指定的插槽。

作用域插槽是一种特殊的插槽，它允许我们在插槽内部访问组件实例的数据，允许父组件将数据传递到子组件中，并在子组件中使用。在组件的模板中使用定义作用域插槽，并在使用组件时，使用来访问插槽内部的数据。

可以看到父组件中拿到的scope就是一个对象，包括了子组件中传来的三个数组，我们可以自己选择展示哪些数据。

具名作用域插槽的工作方式也是类似的，插槽props可以作为v-slot指令的值被访问到：v-slot:header="props"，也可以直接缩写成#header="props"，这是缩写形式。

动态插槽是一种动态地选择插槽名称的方式。我们可以根据组件的状态或属性来决定使用哪个插槽，可以动态地决定将内容插入到哪个具名插槽中。

我们在组件中添加了一个按钮，并在按钮的点击事件处理程序中切换currentSlot的值。当按钮被点击时，currentSlot的值会从default切换到custom，或者从custom切换到default，从而实现默认内容和自定义内容的切换。

在父组件中使用这个组件时，可以根据currentSlot的值来动态地指定插槽名称。

可以通过this.$slots访问到插槽的内容。

其实从打印结果可以看出，slot本质就是Proxy代理的对象，属性名就是各个插槽的名字，属性值就是对应的函数，调用函数得到的结果就是虚拟结点。

就相当于在调用属性名为slot1的函数，就相当于在调用属性名为slot2的函数，该函数接收了msg的参数。

• 插槽内容可以是任意类型，包括HTML、组件等。
• 默认插槽可以不用写属性，具名插槽必须写属性。
• 作用域插槽传递的数据可以根据需要命名。

插槽技术是Vue.js中重要的组件化特性之一，为我们提供了灵活的组件化开发方式，通过合理使用插槽，我们可以轻松地定制和扩展组件的功能，使组件的可复用性和灵活性大大提高。

能力一般，水平有限，本文可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝生活愉快！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/28771.html