当一个组件内部需要传入2处及以上外部标签的情况下 , 需要使用插槽来解决.
格式为:
<slot></solt>
<slot name='abc'></solt>
当有多个居民插槽 , 而slot标签内部不添加name属性时 , 引入默认为第一个插槽的内容 .
父组件用<template> </template>的内容去填挖出的坑 , 类似于父传子 .
使用的<template name="abc"> </template>指定对应插槽中的内容 .
//将父组件的内容插到子组件中
App.vue 父组件
<template>
<div>
<template v-slot:abc> //2.用<template>设定内容 , 用v-slot指定需要插入的槽(abc)
<div>
<span>t</span> //3.组件中<template>使用没有次数限制,<template>里面还可以继续加<template>
<span>w</span> //4.传进插槽的值可以是一个标签,图片,也可以是一个大盒子,第内容没有太多限制.
<span>o</span>
</div>
</template>
</div>
</template>
MyCom 子组件
<template>
<div>
<slot name="abc">具名的插槽,two,默认内容</slot> // 1.在子组件挖个槽,指名 abc
</div> //5.内容展示,可以在父组件中多写几个template,分别对应插槽,可以达到页面盒子切换效果
</template> //子组件可以挖不限制次数的槽,需要指定名称,否则默认添加父组件第一个<template>内容
父组件使用 v-slot 可以简化成 # ,效果是一样的 , 相同类型的有 v-bind 简写为 : , v-on 简写为 @ ,如.
<template v-slot:abc>
<div>
</div>
</template>
简写为
<template #abc>
<div>
</div>
</template>
作用域插槽
依旧是父组件向子组件传递数据 , 但父组件多了返回值属性 . 并可以将值处理后重新插入子组件的槽中 .
//将父组件的内容插到子组件中
App.vue 父组件
<template>
<div>
<template v-slot:abc="scope"> //2.<template>用v-slot填坑,scope用来接收子组件中的自定义属性
<div> //scope接收的值为对象{a:1,b:2,c:3}
<span>{{scope.a}}</span> //内容分别是1,2,3,这些重新插入了子组件的槽中,如此形成了闭环值传递
<span>{{scope.b}}</span>
<span>{{scope.c}}</span>
</div>
</template>
</div>
</template>
MyCom 子组件
<template>
<div>
<slot name="abc" :a='1' :b='2' c='3'></slot> // 1.挖槽,设置自定义内容
</div>
</template> //子组件可以挖不限制次数的槽,需要指定名称,否则默认添加父组件第一个<template>内容
以上就是插槽的基本使用功能 , 相比于子传父 父传子更加灵活 , 特别是对新增了需求又不想改变原有状态 , 插槽是个不错的选择
