当前位置：首页 > article >正文

【前端】【vue】vue2/3，nuxt的插槽使用详解

article 2026/4/24 17:29:04

插槽在Vue2、Vue3和不同版本Nuxt中的使用

Vue2中的插槽

基础插槽

在Vue2中，基础插槽允许在组件的模板中定义一个占位符，然后在使用组件时插入自定义内容。例如，创建一个简单的MyBox组件：

<template><div class="box"><slot></slot></div>
</template><script>
export default {name: 'MyBox'
}
</script><style scoped>
.box {border: 1px solid #ccc;padding: 10px;
}
</style>

使用时：

<template><div><MyBox><p>这是插入到MyBox组件插槽中的内容</p></MyBox></div>
</template><script>
import MyBox from './MyBox.vue';
export default {components: {MyBox}
}
</script>

基础插槽本身不涉及数据传递，主要用于简单的内容插入。

具名插槽

具名插槽允许在一个组件中定义多个插槽，并通过名称来区分。例如：

<template><div class="layout"><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template><script>
export default {name: 'MyLayout'
}
</script><style scoped>
.layout {display: flex;flex-direction: column;
}
</style>

使用时：

<template><div><MyLayout><template v-slot:header><h1>页面标题</h1></template><p>页面主体内容</p><template v-slot:footer><p>版权所有 &copy; 2024</p></template></MyLayout></div>
</template><script>
import MyLayout from './MyLayout.vue';
export default {components: {MyLayout}
}
</script>

具名插槽同样主要用于内容的组织，通常不直接传递数据，不过可以结合其他Vue特性，如props来间接实现数据相关的展示。

作用域插槽 - 数据传递

作用域插槽允许子组件向插槽传递数据。比如有一个展示用户列表的UserList组件，需要在列表项中展示用户的基本信息和自定义操作：

<template><ul><li v-for="user in users" :key="user.id"><slot :user="user"><span>{{ user.name }} - {{ user.age }}</span></slot></li></ul>
</template><script>
export default {data() {return {users: [{ id: 1, name: '张三', age: 25 },{ id: 2, name: '李四', age: 30 }]};}
}
</script>

使用时：

<template><div><UserList><template v-slot:default="slotProps"><span>{{ slotProps.user.name }} - {{ slotProps.user.age }}</span><button @click="handleClick(slotProps.user)">操作</button></template></UserList></div>
</template><script>
import UserList from './UserList.vue';
export default {components: {UserList},methods: {handleClick(user) {console.log(`对用户${user.name}进行操作`);}}
}
</script>

这里子组件UserList通过slot标签的属性:user="user"将用户数据传递给插槽，父组件在使用插槽时，通过v-slot:default="slotProps"接收数据，slotProps是一个对象，包含了子组件传递过来的user数据。

Vue3中的插槽

Vue3在插槽的使用上基本延续了Vue2的语法，但在一些细节上有所改进。

作用域插槽 - 数据传递

在Vue3中，使用v-slot指令更加简洁。例如，创建一个MyList组件展示商品列表：

<template><ul><li v-for="item in items" :key="item.id"><slot :item="item">{{ item.name }}</slot></li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, name: '苹果', price: 5 },{ id: 2, name: '香蕉', price: 3 }]};}
}
</script>

使用时：

<template><div><MyList><template v-slot="{ item }"><span>{{ item.name }} - 价格: {{ item.price }}</span></template></MyList></div>
</template><script>
import MyList from './MyList.vue';
export default {components: {MyList}
}
</script>

这里v-slot后面接一个对象解构，直接获取子组件传递过来的数据item，相比Vue2更加简洁直观。同时，在Vue3中，还可以使用v-slot配合动态参数，实现更灵活的数据传递和插槽使用。

Nuxt中的插槽

Nuxt2

在Nuxt2中，插槽被广泛应用于页面布局和组件中。例如，在默认的layouts/default.vue中：

<template><div><nuxt-head></nuxt-head><header><slot name="header"></slot></header><main><nuxt></nuxt></main><footer><slot name="footer"></slot></footer></div>
</template>

在页面中使用时：

<template><div><template v-slot:header><h1>我的页面标题</h1></template><p>页面内容</p><template v-slot:footer><p>页面底部信息</p></template></div>
</template>

对于数据传递，Nuxt2可以在页面组件中通过this.$root.$data等方式访问全局数据，然后在插槽内容中展示。例如，在layouts/default.vue中定义一个全局的网站名称数据，在header插槽中展示：

<template><div><nuxt-head></nuxt-head><header><slot name="header">{{ $root.$data.siteName }}</slot></header><main><nuxt></nuxt></main><footer><slot name="footer"></slot></footer></div>
</template><script>
export default {data() {return {siteName: '我的网站'};}
}
</script>

在页面中使用时：

<template><div><template v-slot:header><h1>{{ $root.$data.siteName }} - 页面标题</h1></template><p>页面内容</p><template v-slot:footer><p>页面底部信息</p></template></div>
</template>

Nuxt3

Nuxt3基于Vue3，插槽的使用更加简洁和强大。例如，在layouts/default.vue中：

<template><div><Head /><header><slot name="header" /></header><main><slot /></main><footer><slot name="footer" /></footer></div>
</template>

在页面中使用：

<template><div><template #header><h1>Nuxt3页面标题</h1></template><p>Nuxt3页面内容</p><template #footer><p>Nuxt3页面底部</p></template></div>
</template>

在数据传递方面，Nuxt3可以利用组合式API中的useState等函数来共享数据。比如创建一个共享的用户登录状态数据，在header插槽中根据登录状态展示不同内容：

<template><div><Head /><header><slot name="header"><template v-if="isLoggedIn"><span>欢迎，{{ user.name }}</span></template><template v-else><a href="/login">登录</a></template></slot></header><main><slot /></main><footer><slot name="footer" /></footer></div>
</template><script setup>
import { useState } from '#imports';
const { state: user, isLoggedIn } = useState('user', () => ({name: '',loggedIn: false
}));
</script>

在页面中使用时：

<template><div><template #header><!-- 这里可以根据需求覆盖默认的header插槽内容 --></template><p>Nuxt3页面内容</p><template #footer><p>Nuxt3页面底部</p></template></div>
</template>

总结

插槽在Vue2、Vue3以及不同版本的Nuxt中都是非常重要的特性，不仅能实现内容的灵活插入，还能通过作用域插槽等方式实现数据的传递。通过合理使用插槽及其数据传递功能，可以提高组件的复用性和灵活性，构建出更加复杂和高效的应用程序。无论是基础插槽、具名插槽还是作用域插槽，都在不同场景下发挥着关键作用，开发者需要根据具体需求选择合适的插槽使用方式和数据传递策略。

插槽在Vue2、Vue3和不同版本Nuxt中的使用

Vue2中的插槽

基础插槽

具名插槽

作用域插槽 - 数据传递

Vue3中的插槽

作用域插槽 - 数据传递

Nuxt中的插槽

Nuxt2

Nuxt3

总结

相关文章：