slot 插槽_slot m-优快云博客

本文链接：https://blog.youkuaiyun.com/M106588L/article/details/90611093

博客主要介绍了Vue中插槽的相关知识，包括单个插槽、具名插槽和作用域插槽。单个插槽可让子组件使用父组件的HTML结构；具名插槽通过name特性配置内容分发；作用域插槽能让父组件访问子组件数据，v-:slot通常用在template中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽

可以在子组件里使用父组件的html结构

单个插槽

除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃
最初在slot 标签里的任何内容都被视为备用内容

父组件

<my-header>
	<p>666</p>
</my-header>

子组件

<header>
   <slot></slot>
</header>

具名插槽

slot元素可以用一个特殊的元素的特性name来进行配置如何分发内容，多个插槽可以有不同的名字，具名插槽将匹配内容片段中有对应的slot特性的元素。
v-：slot只能用在template
父组件

<template v-slot:名字>
	<p></p>
</template>
        //普通元素也可以
<div slot="名字">
	<p></p>
</div>

子组件

<slot name="名字"></slot>

作用域插槽

在父组件访问子组件数据
作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，就像利用prop属性让子组件访问到父组件的数据一样
slot-scope-作用域插槽

父组件

v-：slot只能用在template

<template v-slot:defalut="{item}">
	<p></p>
</template>
//Vue2.5.0+，不需要template里定义，普通元素也可以
<div slot-scope="{item}">  //item指：{list："list"，name："name"}
	<p></p>
</div>

子组件

  <slot :list="list" :name="name" name="default"></slot>