VueJS
中的slot
插槽语法是定义组件不可获取且非常重要的语法,本篇文章将介绍一下VueJS
中slot
的学习笔记。
在
Vue
2.6.0的版本中,Vue
团队为具名插槽和作用域插槽引入了一个新的统一语法(v-slot
)指令。它取代了slot
和slot-scope
,但是旧的语法没有被移除
插槽内容
Vue
实现了一套内容分发API
,这套API
的设计灵感源自Web Components
规范草案,将<slot>
元素作为承载分发内容的出口。
// slot-comp 为自定义组件
// 定义
<template>
<div>
<slot></slot>
</div>
</template>
// 使用
<slot-comp>
slot content
</slot-comp>
<slot-comp>
<h1>slot content</h1>
</slot-comp>
当组件渲染的时候,<slot></slot>
将会被替换成slot content
。插槽里面可以包含任何代码(包括HTML),如果<slot-comp>
没有包含<slot>
元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
运行结果:
编译作用域
当你想在一个插槽中使用数据时,例如:
<slot-comp>
slot content
{{ slotProps.msg }}
</slot-comp>
该插槽跟模板的其他地方一样可以访问相同的实例属性,而不能访问<slot-comp>
的作用域。例如:
<slot-comp msg="msg">
slot content
{{ msg }} //undefined
</slot-comp>
注意:父级模板里的所有内容都是在父级作用域中编译的,字模板里的所有内容都是在子作用域中编译的
后背内容
有时为一个插槽设置具体的后备内容(也就是默认的内容)是很有用的,他只会在没有提示内容的时候被渲染。
// 定义
<template>
<div>
<slot>默认内容</slot>
</div>
</template>
//使用
<slot-comp>
</slot-comp>
<slot-comp>
自己定义的内容
</slot-comp>
运行结果:
具名插槽
有时我们需要多个插槽,此时就需要使用具名插槽来实现。<slot>
元素有一个特殊的attribute:name
。这个属性可以用来定义额外的插槽。
<slot-comp name="icon">
// <p>default</p> 与下面相等
// 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
<p name="default">default</p>
<p name="icon">icon</p>
</slot-comp>
在向具名插槽提供内容的时候,我们可以在一个template
元素上使用v-slot
指令,并以v-slot
的参数的形式提供其名称:
// 定义
<template>
<div>
<slot name="icon"></slot>
</div>
</template>
// 使用
<slot-comp>
<template v-slot:icon>
<p>icon</p>
</template>
</slot-comp>
运行结果:
现在template
元素中的所有内容都将被传入相应的插槽。任何没有被包裹在带有v-slot
的template
中的内容都会被视为默认插槽的内容。
注意:v-slot
只能添加在<template>
上
作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。绑定在<slot>
元素上的attribute
被称为插槽prop
。
// 定义
<template>
<div>
<slot :iconName="iconName">默认内容</slot>
<slot name="icon" :iconName="iconName"></slot>
</div>
</template>
<script>
export default {
name: 'SlotComp',
data () {
return {
iconName: 'home'
}
}
}
</script>
// 使用
<slot-comp>
<template v-slot:default="slotProps">
<p>default-->{{ slotProps.iconName }}</p>
</template>
<template v-slot:icon="slotProps">
<p>icon-->{{ slotProps.iconName }}</p>
</template>
</slot-comp>
运行结果: