Vue中使用slot的方式取决于你是使用Vue 2还是Vue 3,因为这两个版本在插槽(Slot)的语法上有所不同。
下面是两个版本的基本使用方法:
1. vue2 如何使用slot
在Vue 2中,slot是用来实现组件内容分发的一个关键特性,它允许你在父组件中定义一块内容,然后在子组件中决定如何展示这块内容。
Vue 2提供了几种类型的slots,包括默认插槽、具名插槽以及作用域插槽。
以下是它们的基本使用方法:
1.1. 默认插槽(Default Slot)
默认插槽是最基本的用法,当你在一个组件中没有明确指定插槽名称时,内容将会被分配到默认插槽。
父组件使用:
<template> <child-component> <h1>我是父组件传递给子组件的内容</h1> </child-component> </template>
子组件定义:
<template> <div class="child-component"> <!-- 默认插槽内容将在这里被渲染 --> <slot></slot> </div> </template>
1.2. 具名插槽(Named Slot)
具名插槽允许你有选择地插入内容到子组件的不同区域。
父组件使用:
<template> <child-component> <template v-slot:header> <h1>我是头部内容</h1> </template> <template v-slot:body> <p>我是主体内容</p> </template> </child-component> </template>
子组件定义:
<template> <div class="child-component"> <div class="header"> <slot name="header"></slot> </div> <div class="body"> <slot name="body"></slot> </div> </div> </template>
1.3. 作用域插槽(Scoped Slot)
作用域插槽允许子组件向插槽传递数据。在Vue 2中,你可以使用slot-scope特性来接收这些数据。
父组件使用:
<template> <child-component> <template v-slot:default="{ item }"> <span>{{ item.text }}</span> </template> </child-component> </template>
子组件定义:
<template> <div class="child-component"> <ul> <li v-for="item in items" :key="item.id"> <slot :item="item"></slot> </li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' } ] }; } }; </script>
请注意,从Vue 2.6开始,你可以使用简写的v-slot替换slot-scope,使得代码更简洁:
使用v-slot的简化写法:
<!-- 父组件 --> <template> <child-component> <template v-slot:default="slotProps"> <span>{{ slotProps.item.text }}</span> </template> </child-component> </template>
以上就是Vue 2中使用slot的基本方法。
2. vue3 如何使用slot
Vue 3对插槽的使用进行了简化,并推荐使用新的v-slot语法,即使对于默认插槽也是如此。
Vue 3中对插槽(Slots)的使用进行了改进,使其更加灵活和直观。
以下是在Vue 3中使用插槽的基本方法:
2.1. 默认插槽(Default Slot)
默认插槽的使用方式与Vue 2相似,但语法稍有不同。
Vue 3中不再需要显式地使用<slot>标签,除非你需要配置特定的行为。
父组件使用:
<template> <ChildComponent> <h1>我是父组件传递给子组件的内容</h1> </ChildComponent> </template>
子组件定义:
<template> <div class="child-component"> <!-- 默认情况下,这里会自动渲染传递给组件的内容 --> <!-- 显式使用 <slot> 只是为了在需要时进行更复杂的设置 --> </div> </template>
2.2. 具名插槽(Named Slot)
具名插槽的使用也保持了类似的逻辑,但现在使用v-slot指令更为简洁。
父组件使用:
<template> <ChildComponent> <template v-slot:header> <h1>我是头部内容</h1> </template> <template v-slot:body> <p>我是主体内容</p> </template> </ChildComponent> </template>
子组件定义:
<template> <div class="child-component"> <div class="header"> <slot name="header"></slot> </div> <div class="body"> <slot name="body"></slot> </div> </div> </template>
2.3. 作用域插槽(Scoped Slot)
Vue 3引入了新的v-slot语法,它不仅更简洁,还直接支持作用域插槽的传递。现在你可以直接在v-slot中解构来自子组件的数据。
父组件使用:
<template> <ChildComponent> <template v-slot:default="{ item }"> <span>{{ item.text }}</span> </template> </ChildComponent> </template>
子组件定义:
<template> <div class="child-component"> <ul> <li v-for="item in items" :key="item.id"> <slot :item="item"></slot> </li> </ul> </div> </template> <script setup> import { ref } from 'vue'; const items = ref([ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' } ]); </script>
2.4. 动态插槽名称
Vue 3还支持动态插槽名称,通过将v-slot绑定到一个变量即可实现。
<template> <ChildComponent> <template v-for="(content, name) in slotsContent" :v-slot:[name]> {{ content }} </template> </ChildComponent> </template>
Vue 3中插槽的改进旨在简化API并提高可读性,同时保持了Vue组件间内容复用的强大能力。
Vue 3中v-slot语法是标准用法,即使对于默认插槽也是如此,尽管默认插槽在子组件中可能不需要显式的<slot>标签。
此外,Vue 3引入了Composition API,这会影响子组件内部状态管理的方式,但对插槽的使用影响不大。