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

前言：

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

插槽的定义

• 官方定义：< slot > 元素作为承载分发内容的出口。
• 个人理解：就是在组件中预留了一块地方（使用要插入的内容

• 组件

  //这里是组件的详情页面
  
  

具名插槽

• 页面的组件引用

• 组件

  //这里是组件的详情页面
  
  

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

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

• 页面的组件引用

• 组件

  //这里是组件的详情页面
  
  

还有一个重要的问题

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

  //这样是不对的。
//正确的做法是