美文网首页
VUE2.5.0+和2.5.0-版本作用域插槽的用法区别

VUE2.5.0+和2.5.0-版本作用域插槽的用法区别

作者: 乌罗 | 来源:发表于2018-11-22 22:21 被阅读0次

今日做项目,需要用到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变量来接收子组件传参!

相关文章

  • VUE2.5.0+和2.5.0-版本作用域插槽的用法区别

    今日做项目,需要用到vue中的作用域插槽,因对作用域插槽的用法不是很熟悉,便照官网依葫芦画瓢用了起来。虽然都说vu...

  • 2019-02-15 vue组件基础篇5

    作用域插槽续此例的用意主要是介绍作用域插槽的用法1.允许组件自定义应该如何渲染列表每一项。2.作用域插槽的使用场景...

  • vue组件之高级属性

    1.插槽 组件定义了外部样式,里面内容想要调用的时候再放 插槽用法: 具名插槽: 作用域插槽: 通过$ref获取的...

  • 2.插槽

    匿名插槽 具名插槽 作用域插槽

  • vue----slot插槽

    插槽分类 匿名插槽 具名插槽 作用域插槽

  • Vue中 的作用域插槽

    逻辑:父组件调用子组件的时候,给子组件传了一个插槽,这个插槽叫做作用域插槽,作用域插槽必须是template开头和...

  • jsx中插槽的写法

    作用域插槽 scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。...

  • Vue---hips UI---TabBar使用

    一、基础用法-click 1. 自定义图标 (1) 用法 (2) 延伸的知识点: 作用域插槽:--- 官方讲解的插...

  • vue3中的插槽

    插槽 默认插槽 具名插槽,v-slot可以简写为# 动态插槽 #[dynamicSlotName] 作用域插槽(...

  • 15.作用域插槽的使用

    作用域插槽 作用:父组件提供标签进行渲染,子组件提供数据 用法:通过给子组件模板,slot标签添加属性:data=...

网友评论

      本文标题:VUE2.5.0+和2.5.0-版本作用域插槽的用法区别

      本文链接:https://www.haomeiwen.com/subject/nwirqqtx.html