首页> 基础笔记 >Vue学习笔记 >组件 组件
vue组件插槽--默认内容
作者：小萝卜 2024-03-17 【 Vue 】 浏览 100
简介在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个<button type="submit"> <slot> Submit <!-- 默认内容 --> </slot> </button>
默认内容
在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个 <SubmitButton> 组件：
<button type="submit">
<slot></slot>
</button>
如果我们想在父组件没有提供任何插槽内容时在 <button> 内渲染“Submit”，只需要将“Submit”写在 <slot> 标签之间来作为默认内容：
<button type="submit">
<slot>
Submit <!-- 默认内容 -->
</slot>
</button>
现在，当我们在父组件中使用 <SubmitButton> 且没有提供任何插槽内容时：
<SubmitButton />
“Submit”将会被作为默认内容渲染：
<button type="submit">Submit</button>
但如果我们提供了插槽内容：
<SubmitButton>Save</SubmitButton>
那么被显式提供的内容会取代默认内容：
<button type="submit">Save</button>
很赞哦！ (0)
上一篇：vue组件插槽--具名插槽
下一篇：vue组件插槽--介绍和作用域
