Vue插槽(slot)是一种让父组件可以向子组件中插入内容的机制,用于解决组件内容复用的问题。通过插槽,父组件可以在子组件中定义占位符,并在使用子组件的时候向占位符中插入自定义的内容。
Vue插槽分为具名插槽和默认插槽两种。
1.默认插槽
默认插槽也叫匿名插槽,可以在子组件中使用一个 slot
标签来作为占位符,父组件可以通过这个标签向子组件中传递内容。在父组件中使用子组件时,可以在标签中直接写入要插入的内容,也可以使用 v-bind
指令绑定父组件中的数据。
子组件的模板中可以使用 this.$slots.default
来渲染插入的内容。
示例代码:
子组件 MyComponent:
<template>
<div>
<slot></slot>
</div>
</template>
父组件中使用 MyComponent:
<template>
<div>
<MyComponent>
<p>这是插入的内容</p>
</MyComponent>
</div>
</template>
2.具名插槽
具名插槽可以定义多个插槽,每个插槽都有一个名字,可以在子组件中使用 slot
标签的 name
属性来指定插入的位置。父组件中使用子组件时,可以通过 v-slot
指令来向具名插槽中插入内容。
子组件的模板中可以使用 this.$slots.插槽名
来渲染插入的内容。
示例代码:
子组件 MyComponent:
<template>
<div>
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</template>
父组件中使用 MyComponent:
<template>
<div>
<MyComponent>
<template v-slot:header>
<h1>这是头部</h1>
</template>
<template v-slot:content>
<p>这是内容</p>
</template>
<template v-slot:footer>
<footer>这是底部</footer>
</template>
</MyComponent>
</div>
</template>
以上是Vue插槽的简单介绍。通过使用插槽,可以实现组件的复用和灵活性。