关于Vue中的slot的理解 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


关于Vue中的slot的理解

2019-8-25 释然 前端及开发文章及欣赏


今天在做vue项目的时候,遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时,用他们组件的时候接触过slot,如下图: 



这是element-ui对话框的api,当时我记得我百度过,就是这样写就ok了,当时也没深究。

<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  <span slot="title">
    我是对话框标题
  </span>
  <!-- 这边写对话框的内容 -->
  <span>我是对话框内容</span>
  <span slot="footer" class="dialog-footer">
    我是对话框footer
  </span>
</el-dialog>
效果是这样:



今天研究了,我就查看了源码:



百度的发现这边有两个概念:

1.单个插槽也叫匿名插槽

slot不带name,如下:

<slot></slot>
一个子组件只有一个匿名插槽,就好比对话框的内容没有被含有slot="xx"属性的标签包裹,那么就会替换掉匿名插槽

2.具名插槽

slot 有name,如下

<slot name='xx'></slot>
具名插槽就可以有多个,就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>

标签: 帝皇彩票官网关于Vue中的slot的理解 « Sass开发注意点 | JavaScript杂记(杂而又杂)»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 帝皇彩票官网2015年7月(33)
  44. 2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 帝皇彩票官网2015年3月(55)
  48. 帝皇彩票官网2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 帝皇彩票官网2014年7月(13)
  56. 2014年6月(66)
  57. 帝皇彩票官网2014年5月(99)
  58. 帝皇彩票官网2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 帝皇彩票官网2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 帝皇彩票官网2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 帝皇彩票官网2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
博发彩票登陆 澳彩网彩票注册 桔子彩票平台 桔子彩票开奖 湖北快3开奖 疯狂斗牛 迪士尼彩乐园 帝皇彩票登陆 迪士尼彩乐园 桔子彩票开奖