这篇文章主要为大家介绍了Vue插槽解决父子组件通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
前言
插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些。更多时候也会更加方便。
今天介绍Vue中三种插槽吧:默认插槽、具名插槽、作用域插槽。
环境准备
先搭个初始环境给大家看看哈。一步一步讲完这个插槽。
就是写了一个类别组件,分别渲染这三种数据。
Category组件
{{title}}
- {{item}}
App组件
最开始就是如上图一样的需求,但是现在业务需求更改了,电影变成了只宣传其中一个,其他的不进行宣传,吃的也变成只宣传一个拉。
如下图:
我们怎么改合适呢?
是在Category组件中加if一个个进行判断吗?还是有更好的方法勒???
一个个判断是不行的,那样子代码会变得十分繁杂,不易阅读,万一以后又要更改业务需求,代码都不好动。
接下来就到默认插槽的出现拉。
一、默认插槽
我们在子组件中不用再用props 接收数据,也不做渲染,而是定义一个插槽。
如果当父组件不传值过来,即显示此默认
App组件也作出更改
Games
Movies
Foods
- {{ item }}
显示效果:
解释:
我们在子组件写了一个
我们在父组件中,也不再像之前一样
注意:CSS样式写在父组件或者子组件中都是可以的,因为它是渲染完后才放回子组件中的。写在子组件中,就是在放回子组件中时渲染。
写完这里,客户突然觉得你们这么厉害,不满足啦,又开始给你们整幺蛾子。
接下来就又到具名插槽登场啦哈。
二、具名插槽
竟然我们能够想到用一个插槽啦,那么为什么不能想着用两个插槽来试一试勒?
改造子组件
如果当父组件不传值过来,即显示此默认
父组件
Games
Movies
Foods
- {{ item }}
效果展示
解释:
我们可以在组件中放多个slot,但是多个的时候必须要给他们命名,另外父组件中也要进行指定,这样才不会放不进去。
三、作用域插槽
作用域插槽和前面稍稍有点不同,之前都是数据在父组件中,而作用域插槽是数据在子组件中,反过来传递给父组件,让父组件定义结构进行渲染。
改造的子组件
如果当父组件不传值过来,即显示此默认 如果当父组件不传值过来,即显示此默认
父组件
Foods
- {{ item }}
Foods
- {{ item }}
Foods
{{ item }}
{{listData}}
效果图
这种我在学习及练习过程中,并没有想到哪些使用场景,但是在官网上有案例,我想它必定是有存在的理由,只是我的见识太少,而未能利用到而已。
解释:
子组件中通过:变量名="定义的数据" 向父组件传值,父组件用 接收,因为还要. 一层,才到
- {{ item }}
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注0133技术站的更多内容!
以上就是解决父子组件通信的三种Vue插槽的详细内容,更多请关注0133技术站其它相关文章!