vue 插槽（vue 插槽嵌套）

科技前沿 • 2025-05-17 15:23 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

 <p style="text-indent:33px;">在使用组件时&#xff0c;在引用的组件标签中添加内容时&#xff0c;会自动被组件中的模板代替&#xff0c;如【例1】</p>

【例1】

讯享网

【结果】

当不想要传递给组件的内容被替代，则可以使用组件插槽来解决这个问题，具体使用方法是，在组件模板中添加 <slot> 标签，当组件渲染时，<slot></slot> 将会被替换为“写在组件标签结构中的内容”，如【例2】

【例2】

讯享网

【结果】

【注】

因为父级模板里的所有内容都是在父级作用域中编译的，子模版里的所有内容都是在子作用域中编译的，所以插槽不能访问其所在组件的作用域，而是模板的作用域，如【例3】

【例3】

讯享网

【结果】

默认插槽即，若在组件引用时，没有像其传递内容，则使用默认插槽的内容（也称为后备内容）；若在引用时，传递了内容，则渲染传递的内容，如【例4】

【例4】

组件

未传递内容
讯享网
【结果】

传递内容
【结果】

若在一个组件中需要使用多个插槽，则要使用具名插槽来区分，其使用方式为：在组件中的 <slot> 元素上使用一个特殊的特性 name，利用这个特性可以定义额外的插槽；在引用组件时，需要在 <template> 元素上使用 v-slot 指令，v-slot 的参数即是特性 name，如【例5】

【注】一个不带name的 <slot> 会带有隐含的名字“default”。

【例5】

讯享网

【结果】

【注】v-slot 只能添加在 <template> 上，只有一种情况特殊（介绍如下）

讯享网

【注】该缩写只有在其有参数时可以使用

为了能够让插槽内容访问子组件的数据，可以将子组件的数据作为绑定在 <slot> 元素的一个特性（插槽 prop），则在父级作用域中，可以给v-slot带一个值来定义所提供的插槽 prop 名字，如【例6】

【例6】

讯享网

【结果】

当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板来使用，此时，可以将 v-slot 直接用在组件上，且可以缩写为以下形式：

【注】默认插槽的缩写语法不能和具名插槽混用，会导致作用域不明确，即只要出现多个插槽，就需要为所有的插槽使用完整的基于 <template> 的语法

使用结构传入具体的插槽prop会使模板更简洁

讯享网

根据解构的语法，还可以给 prop 重命名