今日做项目,需要用到vue中的作用域插槽,因对作用域插槽的用法不是很熟悉,便照官网依葫芦画瓢用了起来。虽然都说vue好学易入门,但官方文档有些地方介绍的确实有些晦涩难懂。
通读插槽相关说明可知,2.5.0+版本的作用域插槽在使用时可用任意标签以slot-scope='slopProps'的方式获取子组件传给作用域插槽的数据,此外,也可用对象解构的方法简化用法。而2.0+到2.5.0之间的版本使用作用域插槽时必须用template,其它用法同2.5.0+版本。
因项目用的vue版本是2.3.4,自然就得用template来使用作用域插槽,可实际执行起来,却老是获取不到slot-scope=‘slotProps’中slotProps的值,控制台报错undefined。明明跟官网写法相同,结果却不同。那么几句代码是看了一遍又一遍,耗了一下午,最后才得知这两不同版本间作用域插槽的使用却别还有一个,那就是2.5.0+是用slot-scope变量接收子组件传参的,而2.0+ ~ 2.5.0-版本确是用scope变量来接收子组件传参,就这么一个小小的东西耗费了一下午的时间,实在是不知作何感想。
最后,只能以重要的事情说三遍来告诫自己:
2.0+ ~ 2.5.0-版本用scope变量来接收子组件传参!
2.0+ ~ 2.5.0-版本用scope变量来接收子组件传参!
2.0+ ~ 2.5.0-版本用scope变量来接收子组件传参!
网友评论