网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

vue 插槽理解

2021/4/4 4:47:53 人评论

插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽。 组件的原始内容: 即在vue实例范围之内&#xff0c…

插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽。

组件的原始内容: 即在vue实例范围之内,因此可以调用实例的data和methods

插槽共分为3中:

插槽的结构:

匿名插槽:

具名插槽:

作用域插槽:

匿名插槽
匿名插槽的作用: 保留组件中的所有原始标签内容,这种插槽被称为匿名插槽

直接在组件中写上slot标签对,就可以在根元素中的引用的组件中间显示所写的内容

具名插槽
凡是具有name属性的slot标签,就被称为具名插槽即(在子组件中写,写的位置不同,在引用该模板的页面中显示的位置也会不一样)。

作用:

在组件的原始内容的某个标签中,添加slot=top属性,指明该标签所对应的插槽的名称

在组件模板中通过调用slot标签,兵设置name=top属性,会自动将对应的标签内容添加至当前slot标签所在的位置

注意:原始内容凡是具有slot属性的标签,内容只能添加至组件模板中具有相同值的name属性的slot标签中

匿名插槽的作用: 保留了原始数据,除了具名插槽标签中的内容,即凡是标签中具有slot=top的属性标签

作用域插槽
在组件的原始内容中,通过slot-scope属性接受作用域插槽传递的值,即obj={title:‘标题’,num:19}

作用域插槽:将组件模板中的数据传递给组件的原始内容

在slot开始标签中,添加要传递的数据,避开name属性(具名插槽)

在原始内容中通过slot-scope属性(其值是自定义的)接受传递的数据,即slot-scope=varName(本质是个对象,存储传递的数据,即数据会自动转换成键值对,存储在这个对象里,所以属性名对应属性名,属性值对应属性值)

上一篇:(c语言)自动寄存柜

下一篇:2021-04-04

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?