背景:vue 项目中 经常会遇到好几个页面 公用一个组件 但是针对某一个地方可能显示的内容不一样,这个时候我们难道要再写一个组件吗?当然不!这个时候我们就用到了 slot 插槽!
简言之,把你需要的内容 插到相应的位置...
下面介绍它的用法:
1.单个插槽
父组件
<navbar>
<div class="">
slot content
</div>
</navbar>
复制代码
子组件
<template>
<div class="">
<slot>123</slot>
</div>
</template>
复制代码
这个时候 页面就会显示 slot content
如果父组件里没有添加内容,就会显示 123
2.命名插槽
父组件
<navbar>
<div slot="one">
<button type="button" name="button">454</button>
</div>
<div slot="two">
slot two
</div>
</navbar>
复制代码
子组件
<template>
<div class="">
<slot name="one">one</slot>
<slot name="two">two</slot>
<slot>two2</slot>
</div>
</template>
复制代码
页面显示