Vue 组件插槽

目录

一、组件插槽

1.1、单个插槽

2.2、具名插槽

2.3、作用域插槽

插槽,我要钻到你的怀里

默认插槽

具名插槽

作用域插槽

插槽默认值


一、组件插槽

组件的最大特性就是 复用性 ,而用好插槽能大大提高组件的可复用能力

1.1、单个插槽

当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并 替换 掉插槽标签本身。

Vue 组件插槽_第1张图片

Vue 组件插槽_第2张图片

Vue 组件插槽_第3张图片

2.2、具名插槽

有时我们需要多个插槽,来完成对应的数据自定义显示。

一个不带 name 的 出口会带有隐含的名字 “default” 。

自 2.6.0 起有所更新。已废弃的使用 slot

# 子组件
# 父组件 // 老写法

这里可能是一个页面标题

// 新写法 // v-slot 只能添加在