目录
一、 认识插槽
二、使用插槽
1.普通插槽
插槽组件
使用插槽
查看效果
2.具名插槽
插槽组件
使用插槽
查看效果
3.作用域插槽
插槽组件
使用插槽
查看效果
前言 : 在开发中，我们会经常封装一个个复用的组件，大部分都是传递不同的数据，让组件来进行展示，template结构都是固定的
那么，有没有一种可能，可以让使用者来决定某一块区域到底存放什么内容和元素呢
答案是有的，那就是使用插槽，根据传入的不同，显示特定的内容
这个时候我们就可以使用插槽
- 插槽的使用过程其实是抽取共性、预留不同
- 将共同的元素、内容依然在组件内进行封装
- 将不同的元素使用slot作为占位，让外部决定到底显示什么元素
vue中将<slot>元素作为承载分发内容的出口，使用<slot>就可以为封装组件开启一个插槽
插槽组件
使用插槽
查看效果
给插槽绑定一个name属性，也就是取个名字，使用的时候可以找到对应的插槽把内容放入
插槽组件
使用插槽
查看效果
在vue中有渲染作用域的概念
- 父级模版里的所有内容都是在父级作用域中编译的
- 子模版里的所有内容都是在子作用域中编译的
tip : 也就是说，在父组件中是访问不到子组件的内容的，虽然在父组件中使用了插槽，内容是插进了子组件中，但是还是不能访问子组件中定义的变量
插槽组件
使用插槽
查看效果
tip : 这边文章总的来说不难，不过细节还是挺多的
到此这篇vue的插槽有几种方式（vue插槽的使用）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/21023.html