今天扒一扒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>