热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

插槽及其使用方法详解

本文详细介绍了插槽的概念和使用方法,插槽是组件的一块HTML模板,父组件可以通过插槽来决定组件的显示和功能。文章中解释了插槽的两个核心问题:显示和怎样显示。同时还介绍了多个插槽和带name属性的插槽的定义方法。另外,还介绍了作用域插槽的使用,以及在插槽中传递父组件的对象值的方法。最后,还介绍了两种情况下的属性传值和模版重写的实现方式。

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示怎样显示

1.navigation-link是一个组件   如果不使用插槽  则这个组件里面所有的内容都会被抛弃 不会显示


2.定义组件的时候写了一个插槽标签


3.组件中的所有内容 圈起来内容  会替换掉slot插槽标签


4.多个插槽 带name属性的  定义这个组件的时候 写了3个插槽   

 


 

 中的h1标签会替换掉组件中的

 

https://segmentfault.com/a/1190000012996217

 

作用域插槽  定义组件



升级版插槽  写插槽的时候  在插槽中放一个父组件传过来的对象值    这样就会有下面两种情况

 


第一种 父组件不重写插槽中的模版   一个属性传值够了  也只需要传一个属性值   父组件传过去的del属性值会显示出来 如果不传这个属性 则插槽什么都不显示


第二种 传一个属性不够 需要自己重写插槽模版   这样在插槽中就会显示传过去的模版


 



推荐阅读
author-avatar
AK47GXF
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有