vue插槽的分类及使用
时间: 2023-11-24 13:36:05 浏览: 61
Vue插槽可以分为具名插槽和默认插槽。具名插槽可以在组件中定义多个插槽,并使用v-slot指令来指定插槽名称,以便在父组件中使用。默认插槽可以在组件中使用slot标签定义,并在父组件中使用组件标签包裹内容来传递到插槽中。关于插槽的使用,可以通过Vue官方文档进行学习和参考。 说一个笑话,为什么程序员总是喜欢用鼠标滚轮滚到手酸呢?因为他们喜欢滚动条的样子。
相关问题
vue 插槽种类及示例
在 Vue 中,有三种类型的插槽:默认插槽、具名插槽和作用域插槽。
1. 默认插槽
默认插槽是没有名字的插槽,也称为匿名插槽。如果组件没有指定具名插槽,则使用默认插槽。默认插槽使用语法为 <slot></slot>。
示例:
```html
<template>
<div>
<h1>我是标题</h1>
<slot></slot>
</div>
</template>
<template>
<my-component>
<p>我是默认插槽的内容</p>
</my-component>
</template>
```
2. 具名插槽
具名插槽是有名字的插槽,可以在组件中定义多个具名插槽,使用时需要在 <slot> 标签中指定插槽的名字。具名插槽使用语法为 <slot name="slotName"></slot>。
示例:
```html
<template>
<div>
<h1>我是标题</h1>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</template>
<template>
<my-component>
<template v-slot:content>
<p>我是具名插槽 content 的内容</p>
</template>
<template v-slot:footer>
<p>我是具名插槽 footer 的内容</p>
</template>
</my-component>
</template>
```
3. 作用域插槽
作用域插槽也称为插槽内容传递,是一种将数据从父组件传递到子组件的插槽。作用域插槽使用语法为 <slot v-bind:propName="prop"></slot>。
示例:
```html
<template>
<div>
<h1>我是标题</h1>
<slot name="content" v-bind:list="list"></slot>
</div>
</template>
<template>
<my-component>
<template v-slot:content="slotProps">
<ul>
<li v-for="item in slotProps.list">{{ item }}</li>
</ul>
</template>
</my-component>
</template>
```
vue2 匿名插槽使用
在Vue 2中,匿名插槽是通过在组件中使用`<slot>`标签来实现的。匿名插槽可以用于提供默认内容,当使用者没有传递具体结构时,这些默认内容会被显示出来。例如,在一个名为NiMing.vue的组件中,可以这样定义一个匿名插槽:
```
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
</div>
</template>
```
在这个例子中,如果在使用NiMing组件时未传递具体的插槽内容,那么默认值"我是一些默认值,当使用者没有传递具体结构时,我会出现"就会被显示出来。你可以根据需要在组件中定义多个匿名插槽,并在使用组件时根据插槽名称来传递具体的内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2插槽使用-- 默认插槽、具名插槽、作用域插槽](https://blog.csdn.net/m0_74767583/article/details/129288115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3的插槽匿名插槽、具名插槽、作用域插槽、动态插槽](https://blog.csdn.net/weixin_39838846/article/details/125967376)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]