Vue的插槽是一种功能强大的模板机制,它允许父组件向子组件传递内容。Vue的插槽分为默认插槽、具名插槽和作用域插槽。
- 默认插槽
默认插槽就是没有指定名称的插槽,可以通过在子组件中使用<slot>
标签来表示。父组件中的内容将会被插入到这里。默认插槽在一些简单的情况下非常有用。
例如,假设我们有一个HelloWorld
组件,它的模板如下所示:
// 子组件
<template>
<div>
<h1>Hello, World!</h1>
<slot></slot>
</div>
</template>
在这个组件中,我们指定了一个默认插槽。任何放在子组件标签之间的内容都将被插入到该插槽内。例如:
// 父组件
<HelloWorld>
<p>This is some content.</p>
</HelloWorld>
在这种情况下,<p>
标签和其中的“内容”都将被插入到默认插槽中,并与<h1>
标签一起呈现。
2. 具名插槽
具名插槽是通过给插槽一个名称来定义的。具名插槽可以让我们在子组件中有多个插槽,并且可以在父组件中指定内容插入到哪个插槽。在子组件中,我们可以用<slot>
标签加上name
属性来定义一个具名插槽。在父组件中,我们可以在<template>
标签中使用<slot>
标签来指定内容插入到哪个具名插槽中。
例如,假设我们有一个Layout
组件,它的模板如下所示:
// 子组件
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
在这个组件中,我们定义了三个插槽:header
、default
和footer
。我们可以在父组件中使用<template>
标签来指定内容插入到指定的插槽中。例如:
// 父组件
<Layout>
<template v-slot:header>
<h1>My App</h1>
</template>
<p>This is the main content.</p>
<template v-slot:footer>
<p>© 2020 My App</p>
</template>
</Layout>
在这种情况下,<h1>
标签将会被插入到header
插槽中,<p>
标签将会被插入到default
插槽中,<p>© 2020 My App</p>
标签将会被插入到footer
插槽中。
3. 作用域插槽
作用域插槽是一种允许子组件向父组件传递数据的插槽。它可以让父组件在插槽内使用子组件中的数据。这种插槽通过在子组件模板中使用<slot>
标签加上v-bind
指令来定义。在父组件中,我们可以在<template>
标签中使用<slot>
标签,并通过v-slot
指令来定义一个作用域插槽。
例如,假设我们有一个List
组件,它的模板如下所示:
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</li>
</ul>
</div>
</template>
在这个组件中,我们定义了一个作用域插槽,使用了v-bind
指令来绑定一个item
属性。在父组件中,我们可以使用v-slot
指令来定义作用域插槽,并使用slot-scope
属性来在插槽内声明一个变量来访问子组件中的数据。
例如,我们可以在父组件中这样使用List
组件:
<List :title="title" :items="items">
<template v-slot:item="props">
<span>{{ props.item.name }}</span>
</template>
</List>
在这种情况下,<span>{{ props.item.name }}</span>
标签将会被插入到每个列表项的插槽内,并使用子组件中的item
数据进行渲染。
- 当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承载分发内容的出口
- slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用
- 默认插槽 父组件在使用的时候,直接在子组件的标签内写入内容即可
- 具名插槽 子组件用name属性来表示插槽的名字 父组件中在使用时在默认插槽的基础上加上slot属性,值为子组件插槽name属性值
- 作用域插槽 子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接受的对象上
父组件中在使用时通过v-slot:(简写:#)获取子组件的信息,在内容中使用