1、普通用法
使用<slot></slot>标签,可以将父组件放在子组件内的内容,显示在想让他显示的地方。例:
子组件children:
<button><slot></slot></button> // slot的位置就是父组件中的<span>123456</span>
父组件:
<children><span>123456</span></children>
那么会得到:
<button><span>123456</span></button>
children子组件里的slot中可以有自己的内容,
<button><slot>123456</slot></button>
我们可以把他理解成默认值,如果父组件传入相应的内容,那么最终显示的就是父组件传入的内容,如果父组件中不传入内容,那么最终显示的就是子组件slot中的内容
2、具名slot
多个slot标签可以使用
<slot name="mySlot1"></slot>
<slot></slot>
<slot name="mySlot2"></slot>
name属性来进行标识,在使用的时候就可以通过<template v-slot:名字></template >来给对应的slot进行分发。
<children>
<template v-slot:mySlot1>
<div>哈哈哈哈</div>
</template>
<template v-slot:default>
<div>呵呵呵呵</div>
</template>
</children>
这样在子组件中对应的名字为 "mySlot1" 的slot位置的内容就是<div>哈哈哈哈</div>
,而在没有指定名字的slot的位置会出现<div>呵呵呵呵</div>
,(<div slot="mySlot1">这种写法已经被废弃。)
tips: 具名插槽可以缩写成 <template #slotName></template>,slotName为slot的名字
3、作用域插槽。
在理解作用域插槽之前,我们必须要先知道编译作用域,简单来说,就是在父级模板中的内容都是在父级作用域中编译的,在子模板中的所有内容都是在子作用域中编译的。还是拿上面的children组件和父组件来说。
子组件children:
<button>
<slot>{{user.name}}</slot> // 这里的user就是子组件里面user
</button>
父组件调用children:
<children>
<span>{{user.name}}</span> // 这里的user就是父组件中的user
</children>
如果想在父组件中使用插槽的时候使用子组件中的user,就需要用到作用域插槽。作用域插槽需要在子组件中给slot元素绑定一个特性。
children组件:
<button>
<slot name="mySlot" v-bind:user="user"></slot>
</button>
这个特性被称为插槽prop。这样在父组件中,就可以使用这个user了,如代码,在slotProp中,就可以访问到子组件中的user;
父组件:
<children>
<template v-slot:mySlot="slotProps">
<span>{{slotProps.user}}</span>
</template>
</children>
4、动态插槽名:
2.6.0新增了动态指令参数,插槽也可以使用动态指令参数来定义动态的插槽名。
<children>
<template v-slot:[slotName]>
...
</template>
</children>
网友评论