前端架构vue架构插槽slot使用教程
程序员文章站
2022-11-19 17:54:56
1、直接使用新建组件 article新建 learn,并在 learn 中使用 articlelearn.vue 和article.vue 在同一文件夹下slot 相当于把 div 插入到 artic...
1、直接使用
新建组件 article
新建 learn,并在 learn 中使用 article
learn.vue 和 article.vue 在同一文件夹下
slot 相当于把 div 插入到 article 中 slot 位置
运行效果
2、设置默认值
即使用 slot 时,不传入会显示默认的内容,传入则使用传入的内容
如不设置默认值,则不显示任何内容,代码如下
先看不设置默认值的情况
article 内容
learn 内容
运行效果
设置默认值
article 内容
learn 内容
运行效果
3、多个 slot 用法
article 内容
learn 内容
通过给 slot 标签设置 name 属性值,并通过 v-slot 来对应
运行效果
v-slot:title 可以简写为 #title,代码如下
4、作用域插槽
父级插槽使用子组件中的数据
article 内容
learn 内容
运行效果
看上下2个 article 显示的区别,上边显示的是 content1,下边显示的是 content2
上面代码 v-slot:default="slotprops" 可以简写成 v-slot="slotprops"
简写后的代码
解构插槽 prop
在支持的环境下 (单文件组件或现代浏览器),可以使用 es2015 解构传入具体的插槽 prop
代码如下
5、动态插槽名
article 内容
learn 内容
运行效果
以上就是前端架构vue架构插槽slot使用教程的详细内容,更多关于vue插槽slot教程的资料请关注其它相关文章!
上一篇: 颈椎病要注意哪些 颈椎病的注意事项
下一篇: 睡眠不好怎么办 中医5法调理睡眠