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 来接收插槽内容,

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

相关推荐
其美杰布-富贵-李43 分钟前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
嘟嘟07171 小时前
useRef + Web Worker:React 中的耗时计算不卡页面
javascript·vue.js
万敏1 小时前
Vue3 全栈实战第五周:Vitest 单元测试从零搭建实战记录
vue.js·node.js·全栈
sugar__salt4 小时前
跟着 Demo 学 Pinia:两种仓库写法 + 完整 TodoList 复现
前端·javascript·vue.js·前端框架·vue
A24207349308 小时前
Vue + TypeScript 请求数据后结合 Element UI 实现树形菜单与下拉选择
vue.js·ui·typescript
java1234_小锋8 小时前
Vue3专题 - 条件渲染
前端·javascript·vue.js
鸽鸽8 小时前
Vue 3 API 完全指南:从 Options 到 Composition 的进阶之路
前端·vue.js
肉肉不吃 肉9 小时前
无渲染组件和组合式函数
前端·javascript·vue.js
其美杰布-富贵-李9 小时前
01 从项目结构开始认识 Vue 3
javascript·vue.js·ecmascript
snow@li9 小时前
Vue Axios封装与SpringBoot Payload封装全景关联分析(前后端数据交互底层闭环)
前端·vue.js·spring boot