当前位置: 首页 > Web前端 > vue.js

[Vue]说说vue的slot语法02

时间:2023-04-01 00:50:17 vue.js

slot简写,scopeslot。槽的简写(#vue2.6.0new)v-slot:-->#就像v-bind:shorthandfor:和v-on:shorthandfor@一样,v-slot:也有自己的简写符号#Note:v-slot:和oldsyntax区别//↓下面是伪代码v-bind:slot===:slot(都是oldslot语法,就是oldsyntaxslot+v-bind:来传递valuesdynamically):slot!==v-slotv-slot:===#Scopeslot(vue2.6.0已经更新)注意slot-scope是一个旧的语法,已经被废弃了。了解它但不要学习它以避免混淆。需要允许使用站点的html访问分发站点的信息,因此出现了作用域插槽。在分发站点,将需要传输的信息以属性名+属性值的形式卸载到标签上,在使用站点可以通过slotProps对象访问传输的信息。(一般会直接用解构语法解构对应的key,推荐解构语法)↓Panel.vue

//↓最基本的使用<面板>信息:{{obj.msg}}序列号:{{obj.index}}Panel>
//↓实际项目中一般都是这么写的(slot#的缩写,属性解构)信息:{{msg}}序号:{{index}}
更进一步,vue2.6.0支持动态插入槽名...这个特性可以用于v-for批量渲染。还有一点作用域槽的补充使用,比如Information:{{msg}}v-slot:必须有参数后面,即必须有一个槽名“s1”。命名插槽有自己定义的名称()。对于匿名插槽,插槽名称是默认的。消息:{{msg}}完成。同步更新到你的语雀https://www.yuque.com/diracke...