vue的内置组件slot

vue的内置组件slot

vue有很多内置的组件，有component，transition, transition-group, keep-alive, slot；其中slot(插槽)官方文档的解释为内容分发的出口，官方解释很抽象，我们不如直接来根据名字插槽来理解，即留出一个位置，你可以插入任何你想显示的东西例如文本或者hml标签

为什么要用slot？

vue最大的特性就是组件化，在实际项目开发中都会封装公用组件，增强代码复用性。而公用组件就是要可以在多处引用，这就要求网站多处的渲染解构或效果要完全一样，才能把一样的这部分拿出来封装成一个公用组件多处引用，但实际项目开发中设计出来的网站很少有多处效果完全一样的情况，往往都是大体效果类似，并不完全一样，多少会有一些差别。这时候就会用到组件的slot了，封装公用组件的时候把不一样的地方作为一个插槽留出来，在引用组件的时候插入什么就显示什么。这样就实现了组件的高度复用。

 

 

这样定义公用组件myTab.vue：

<div>
    <div class="mytab">
      <span v-for="item in showItems" :key="item.name">{{item.label}}</span>  
      <slot></slot>   // 插槽，给苹果或橘子留出来的位置
    </div>
</div>
复制代码

第一个地方调用：

import myTab from '@/components/myTab/myTab.vue'  //导入组件
... //此处省略其他语句
 components: {
      myTab  //注册组件
 },
...
//调用
<my-tab :showItems="showItems">
    <i class="iconfont">&#xe63a;</i>  // 插入筛选图标（画苹果）
</my-tab>
 
最终渲染结果：
<div>
    <div class="mytab">
      <span v-for="item in showItems" :key="item.name">{{item.label}}</span>  
      <i class="iconfont">&#xe63a;</i> 
    </div>
</div>
 
复制代码

第二个地方调用：

import myTab from '@/components/myTab/myTab.vue'  //导入组件
...
 components: {
      myTab  //注册组件
 },
...
//调用
<my-tab :showItems="showItems">
    <span class="slotHandle"> // 插入退出查看按钮（画橘子）
      退出查看
      <i class="iconfont">&#xe61a;</i>
    </span>
</my-tab>
 
最终渲染结果：
<div>
    <div class="mytab">
      <span v-for="item in showItems" :key="item.name">{{item.label}}</span>  
      <span class="slotHandle">
      退出查看
      <i class="iconfont">&#xe61a;</i>
    </span> 
    </div>
</div>
 
复制代码