<p style="text-align:center;"><img alt="" height="224" src="https://i-blog.csdnimg.cn/blog_migrate/ea6e58dedb5103b.jpeg" width="826" /></p> 讯享网
目录
一、 认识插槽
二、使用插槽
1.普通插槽
插槽组件
使用插槽
查看效果
2.具名插槽
插槽组件
使用插槽
查看效果
3.作用域插槽
插槽组件
使用插槽
查看效果
前言 : 在开发中，我们会经常封装一个个复用的组件，大部分都是传递不同的数据，让组件来进行展示，template结构都是固定的
那么，有没有一种可能，可以让使用者来决定某一块区域到底存放什么内容和元素呢
答案是有的，那就是使用插槽，根据传入的不同，显示特定的内容
这个时候我们就可以使用插槽
- 插槽的使用过程其实是抽取共性、预留不同
- 将共同的元素、内容依然在组件内进行封装
- 将不同的元素使用slot作为占位，让外部决定到底显示什么元素
vue中将<slot>元素作为承载分发内容的出口，使用<slot>就可以为封装组件开启一个插槽
插槽组件
讯享网
使用插槽
查看效果
给插槽绑定一个name属性，也就是取个名字，使用的时候可以找到对应的插槽把内容放入
插槽组件
讯享网
使用插槽
查看效果
在vue中有渲染作用域的概念
- 父级模版里的所有内容都是在父级作用域中编译的
- 子模版里的所有内容都是在子作用域中编译的
tip : 也就是说，在父组件中是访问不到子组件的内容的，虽然在父组件中使用了插槽，内容是**了子组件中，但是还是不能访问子组件中定义的变量
插槽组件
讯享网
使用插槽
查看效果
tip : 这边文章总的来说不难，不过细节还是挺多的
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/175179.html