vue slot 理解

slot元素作为组件模板之中的内容分发插槽。
有name的是具名slot
一、匿名slot
子组件



父组件

如果子组件里没有slot,那么内容“我是一个U盘”就不会出现
二、具名slot
slot元素可以用一个特殊的属性name 来配置如何分发内容,多个slot可以有不用的名字,根据具名slot的name来进行匹配,显示内容。如果有默认的slot,那么没有匹配到的内容将会显示到默认的slot中,如果没有默认的slot,那么没有匹配到的内容将会被抛弃。

子组件

父组件


显示:


image.png

作用:比如说一些样式一样内容不一样的页面,就可以用到slot来分发

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是组件 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用...
    angelwgh阅读 4,145评论 0 0
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 9,262评论 5 14
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,485评论 0 29
  • Vue笔记系列1、Vue.js入门3、Vue.js进阶 API 以下会随用随记一些API,可能会不定期更新。 Vu...
    其心阅读 6,246评论 0 10
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 4,243评论 0 2

友情链接更多精彩内容