一级a做爰网站中国,网站建设有关表格,零基础1小时快速建站,家政网站怎么做什么是插槽#xff1f;
Slot 通俗的理解就是“占坑”#xff0c;在组件模板中占好了位置#xff0c;当使用该组件标签时候#xff0c;组件标签里面的内容就会自动填坑#xff08;替换组件模板中slot位置#xff09;并且可以作为承载分发内容的出口。
简单的来说为了更加…什么是插槽
Slot 通俗的理解就是“占坑”在组件模板中占好了位置当使用该组件标签时候组件标签里面的内容就会自动填坑替换组件模板中slot位置并且可以作为承载分发内容的出口。
简单的来说为了更加抽象的去复用组件而诞生的功能。 默认插槽
在组件中使用slot/slot来进行插槽定义例如
templateh2{{ title }}/h2slot/slot/templatescript setup langtsdefineProps([title])/script
在其他组件调用时调用
templateSlotTwe :titletitle1!-- 填入需要定制化的组件 --h2你好/h2/SlotTwe
/template
具名插槽
具名插槽本质上就是在默认插槽的基础上进行相关命名在使用时通过指定的命名去选择对应的插槽进行填充。
子组件中
ps通过namexx 来对插槽进行命名。事实上默认插槽的name是“default” templatediv classitemh3{{ title }}/h3slot names1/slotslot names2/slot/div/template
父组件中
ps可使用 v-slot:xx 或 #xx 来指定对应的插槽进行插入 Category title今日热门游戏template v-slot:s1ulli v-forg in games :keyg.id{{ g.name }}/li/ul/templatetemplate #s2a href更多/a/template/Category
作用域插槽
简单的理解就是数据由子组件自身决定而数据的展现形式由组件的使用者来决定。
子组件中
如下games的数据由组件本身提供但是数据展现的形式由调用者来决定。通过 “:Xxx”来传递数据给调用者 templatediv classcategoryh2今日游戏榜单/h2slot :gamesgames a哈哈/slot/div/templatescript setup langts nameCategoryimport {reactive} from vuelet games reactive([{id:asgdytsa01,name:英雄联盟},{id:asgdytsa02,name:王者荣耀},{id:asgdytsa03,name:红色警戒},{id:asgdytsa04,name:斗罗大陆}])/script
父组件中
组件通过v-slot获取对应数据对象 Game v-slotparams!-- Game v-slot:defaultparams --!-- Game #defaultparams --ulli v-forg in params.games :keyg.id{{ g.name }}/li/ul/Game
v-slot注意点
要注意命名的选择和数据的获取如下例子
!-- 选择了名称为S1的插槽并获取S1插槽中传递过来的数据对象params --
Game v-slot:S1params
