vue 作用域插槽、具名插槽

在子组件中使用了具名插槽<slot name="qwe" :games="games" x="我是x" y="我是y"></slot>

相应的在父组件中使用<template #qwe="data">的语法来接收插槽内容。

这个语法是ok的,

但是在 Vue 3.2.0 版本之后,还可以使用简化的语法 #qwe 来接收插槽内容,而不需要使用 ="data",如下:

在父组件中,可以这样使用具名插槽:

html 复制代码
<div>
  <MySon>
    <template #qwe>
      <p> {{ qwe.games }} </p>
      <p> {{ qwe.x }} </p>
      <p> {{ qwe.y }} </p>
    </template>
  </MySon>
</div>

这里去掉了 ="data",直接使用 #qwe 来接收插槽内容,

这种简化的语法可以让模板更加简洁和易读

相关推荐
hexu_blog10 小时前
vue+java实现图片批量压缩
java·前端·vue.js
parade岁月11 小时前
开源一个 Vue 3 Table:API 学 antdv、主题学 Nuxt UI
前端·vue.js
吹牛不交税12 小时前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js
漓漾li14 小时前
每日面试题(2026-05-15)- 前端
前端·vue.js·react.js
前端那点事14 小时前
告别低级冗余!10个前端原生高阶技巧,让代码更优雅、性能更出众
前端·vue.js
hexu_blog14 小时前
前端vue后端java如何实现证件照功能
前端·javascript·vue.js
Southern Wind15 小时前
谷记账——一个 Vue 3 批次记账 App
前端·javascript·vue.js
peepeeman16 小时前
vue组件透传
前端·javascript·vue.js
镜宇秋霖丶16 小时前
2026.5.12@霖宇博客制作中遇见的问题
前端·vue.js·elementui
代码煮茶18 小时前
Vue3 上传组件实战 | 从 0 封装大文件分片上传组件(断点续传 / 秒传 / 进度条)
javascript·vue.js