今天扒一扒vue插槽slot的一些事，主治插槽不起作用，等问题

前言：

​ 前两天查了插槽的相关资料，发现大部分csdn或者百度的文章都是把官网的一些例子直接复制粘贴过来，来蹭流量。而对我们真正需要解决问题的起不到任何一些作用。当前 其中还是有一些不错的文章的。也不能说全部都是那种照搬。此文章仅用作自己与那些和我朋友一样问题的人做个记录。

插槽的定义

• 官方定义：< slot > 元素作为承载分发内容的出口。
• 个人理解：就是在组件中预留了一块地方（使用<slot name="插槽名></slot>包裹起来），这块地方你可以放一些你的自定义内容，并可以设定默认内容。这块地方可以拥有自己的名字，也可以不带名字。也有自己的地盘范围。页面的组件引用就可以在<template #插槽名>模板 中放入你想放的内容。

基本使用

默认使用匿名插槽

• 页面的组件引用

  <component>要插入的内容</component>
  

• 组件

  //这里是组件的详情页面
  <template>
  	<slot></slot>//内容就放到这里
  </template>
  

具名插槽

• 页面的组件引用

  <component>
  	<template #slotName> //这里的#号是v-slot:slotName的缩写
  		<div>
              插槽内容
          </div>
      </template>
  <component>
  

• 组件

  //这里是组件的详情页面
  <template>
  	<slot name="slotName"></slot>//内容就放到这里
  </template>
  

作用域插槽：在插槽中如何访问子组件的数据？

当你使用具名插槽，而你的子组件又是使用v-for循环出来的列表，你想取到列表的行数据，你会怎么取呢？因为在父组件是不能直接访问子组件的列表行数据的？所以就引出了一个解决方案，叫做作用域插槽，下面是如何使用作用域插槽

• 页面的组件引用

  <component >
  	<template #slotName="{ propName }">  //propName:组件传过来的变量名，{}花括号是用来解构参数的。
  		{{propName.msg}} //访问组件插槽传递过来的msg
      </template>
  </component>
  

• 组件

  //这里是组件的详情页面
  <template>
  	//这里的slotName要和页面的组件引用的#slotName一致。
  	//:prodName要和页面的组件引用的prodName。
  	//bindAtr 是传递到组件引用界面的数据
  	<slot name="slotName" :propName="bindAtr"></slot> 
  </template>
  

还有一个重要的问题

比如我的这个业务场景：
我一个列表item组件，里面的一个price插槽需要根据上层的菜单索引来指定访问哪个price字段，如索引为1的时候，要使用price价格字段，索引为2的时候要使用price2字段。也要根据不同的索引值来显示不同的按钮组。根据这个，引出 slot 中的 template内容 动态显示的问题。解决思路是template中的内容根据 v-if来控制显示和隐藏。切记不要用v-if去控制template，是去控制里面的内容。如下伪代码：

<template #slotName v-if="***">
	<div>内容</div>
</template>  //这样是不对的。
//正确的做法是
<template #slotName >
	<div v-if="***">内容</div>
	<div v-else>内容</div>
</template>