Vue 3 中插槽怎么设置默认的备用展示内容

阿伟酱_2495

阿伟酱_2495

2026-10-20

666人浏览

原创

vue 3 中插槽默认内容写在 标签内部,仅当父组件未提供任何内容时生效;支持文本、html、组件等任意结构,可访问子组件响应式数据,具名插槽同理。

vue 3 中插槽怎么设置默认的备用展示内容

在 Vue 3 中,给插槽设置默认内容非常直接:把备用文案或结构写在 标签内部即可。它只在父组件没传任何内容时生效,一旦父组件写了内容,整个 就会被完全替换。

基本写法:直接在 slot 标签里写内容

这是最常用也最简洁的方式。子组件中定义插槽时,在 <slot></slot> 开始和结束标签之间填入默认展示内容:

这样,如果父组件这样用:
—— 页面上会显示 “Submit”;
而如果这样用:
保存草稿 —— 页面上就只显示 “保存草稿”,默认内容被完全覆盖。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习