今儿个咱来聊聊slot这玩意儿。我是真没搞懂这东西到底有啥用，感觉就像是多此一举。后来随着项目越做越大，组件越写越多，我才慢慢体会到它的妙处。 初识slot 记得刚开始接触的时候，是在做一个电商网站的项目。当时需要做一个商品列表的组件，每个商品都有图片、标题、价格等等。我把这些东西都写死在组件里，结果发现，不同的页面，商品展示的样子还不太一样，有的要加个“新品”标签，有的要显示销量，改起来那叫一个麻烦。 
后来组长跟我说，可以用slot来解决这个问题。我当时还一脸懵逼，啥是slot？组长就给我演示一下，在组件里写个 <商品列表> 
商品标题 价格：XXX 
我一看，还真行！这样一来，组件里就只管结构，具体显示啥内容，完全由使用组件的地方决定，灵活多。 深入理解slot 后来我又遇到更复杂的情况。比如，有的商品列表，标题要在左边，有的要在右边，这可咋整？难道要写两个组件吗？ 这时候，我又学到slot的另一个用法，就是给slot起个名字。比如，我可以这样写： 
然后，在使用组件的时候，就可以通过 <商品列表> 商品标题 
价格：XXX 
这样一来，不管标题在左边还是右边，我都可以通过调整v-slot的顺序来实现，再也不用写两个组件！ slot的实际应用 我在项目中已经离不开slot。不管是做弹窗、列表、表单，还是各种各样的组件，我都会用slot来预留一些“坑”，让组件的使用者可以根据自己的需求来填充内容，大大提高组件的复用性和灵活性。 就拿我最近做的一个后台管理系统来说，里面有很多表格，每个表格的列都不太一样。如果不用slot，我得写多少个表格组件！用slot之后，我只需要写一个通用的表格组件，然后在每个页面里，根据需要填充不同的列就行，简直不要太爽！ slot这玩意儿，就像是搭积木，你可以用它来搭建各种各样的形状。一开始可能觉得它没啥用，但当你真正理解它的用法之后，你会发现，它简直就是组件化开发的“神器”！
|
[复制链接]
