Vue插槽，是学习vue中必不可少的一节，当初刚接触vue的时候，对这些掌握的一知半解，特别是作用域插槽一直没明白。
后面越来越发现插槽的好用。
分享一下插槽的一些知识吧。
一、插槽内容
立即学习“前端免费学习笔记（深入）”；
一句话：插槽内可以是任意内容。
先看一下下面的代码：声明一个child-component组件，
如果现在我想在内放置一些内容，结果会是怎样？
Vue.component('child-component',{ template:`Hello,World! ` }) let vm = new Vue({ el:'#app', data:{ } })
登录后复制
你好
登录后复制
输出内容还是在组件中的内容，在 内写的内容没起作用。
我们现在给组件增加一个插槽
我们在内写的”你好”起作用了！！！
Vue.component('child-component',{ template:` Hello,World! ` })
登录后复制
到现在，我们知道了什么是插槽：
插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。
这句话的意思就是，没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！
二、具名插槽
具名插槽，就是给这个插槽起个名字
在组件中，我给插槽起个名字，一个名字叫”girl”，一个名字叫”boy”，还有一个不起名字。
然后再内，slot属性对应的内容都会和组件中name一一对应。
而没有名字的，就是默认插槽！！
漂亮、美丽、购物、逛街 帅气、才实Vue.component('child-component',{ template:`我是一类人， 我是默认的插槽这个世界不仅有男人和女人
` }) let vm = new Vue({ el:'#app', data:{ } })
登录后复制
3、作用域插槽
之前一直没搞懂作用域插槽到底是什么！！！
说白了就是我在组件上的属性，可以在组件元素内使用！
先看一个最简单的例子！！
我们给元素上定义一个属性say（随便定义的！），接下来在使用组件child，然后在template元素上添加属性slot-scope！！随便起个名字a
我们把a打印一下发现是 {“say” : “你好”}，也就是slot上面的属性和值组成的键值对！！！
这就是作用域插槽！
我可以把组件上的属性/值，在组件元素上使用！！
{{a}}Vue.component('child',{ template:`` }) let vm = new Vue({ el:'#app', data:{ } })
登录后复制
再看一下下面的例子：
{{a}}Vue.component('child',{ props:['lists'], template:`
- ` }) let vm = new Vue({ el:'#app', data:{ nameList:[ {id:1,name:'孙悟空'}, {id:2,name:'猪八戒'}, {id:3,name:'沙和尚'}, {id:4,name:'唐僧'}, {id:5,name:'小白龙'}, ] } })
登录后复制
看一下输出结果
相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是了解一下Vue中的插槽的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3023134.html
