深入理解Vue的v-slot用法-优快云博客

本文链接：https://blog.youkuaiyun.com/asdfwxy/article/details/109185922

本文详细介绍了Vue中的v-slot特性，包括独占默认插槽和具名插槽的使用。v-slot允许在template元素上进行声明，并且可以使用动态参数，如v-slot:attributeName。在Vue 2.6以后，可以使用#代替v-slot:来简化语法。需要注意的是，v-slot后面必须跟具体的插槽名称，不能直接使用#{data}这样的表达式。

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

v-slot只能是template元素上，有一种额外情况
独占默认插槽

//父组件
<template>
    <item > 
        <template v-slot:default> // v-slot:default可以不加,只能定义在template上
            <div>牛奶</div>
		</template>	
     <item>
</template>

 //item子组件
<template>
	<div>
		<slot ></slot>//默认插槽   
		<h1>杯子  </h1>
	</div>
</template>

具名插槽

//父组件
<template>
    <div>
        <layout>
      	 <template v-slot:header>//v-slot指令使用插槽
          <div >头部标题</div>
         </template>
           <div >显示的默认内容</div>
                    <!--或者
             		<template v-slot:default>
                        <div >显示的默认内容</div>
                     </template>	
             		-->
		<template v-slot:footer>
            <div >尾部</div>
         </template>
        </layout>
    </div>
</template>
//子组件
<template>
    <div>
        <layout>
            <h1>layout子组件</h1>
            <slot name="header"></slot> //这种就叫具名插槽
            <slot></slot> //如果不指定名字，就会将模板中未匹配到的内容渲染到默认插槽中，这里为显示的内容
            <slot name="footer"></slot>
        </layout>
    </div>
</template>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “header”，那么这个绑定将等价于 v-slot:header。

<layout>
  <template v-slot:[attributeName]>
    ...
  </template>
</layout>

2.6后插槽可以把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

v-slot:后面必须有值，不可写成#="{data}"

<template>
    <div>
        <cup>
            <template #default="msg"> 
                    <div>
                      {{size}}   
              		 </div>
			</template>
        </cup>
    </div>
</template>

v-slot理解