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

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

相关推荐
VX:Fegn08954 分钟前
计算机毕业设计|基于springboot + vue酒店管理系统(源码+数据库+文档)
vue.js·spring boot·课程设计
Irene199132 分钟前
Vue3 中使用的命名规则 和 实际开发命名规范总结
vue.js·命名规范
Amumu121382 小时前
Vue脚手架(二)
前端·javascript·vue.js
比特森林探险记3 小时前
组件通信 与 ⏳ 生命周期
前端·javascript·vue.js
海绵宝龙4 小时前
Vue中nextTick
前端·javascript·vue.js
qq_12498707535 小时前
基于springboot的会议室预订系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
ttod_qzstudio7 小时前
Vue 3 中 toRaw 的取舍之道:以 Babylon.js 3D 开发为例
vue.js·babylonjs
Mr Xu_7 小时前
Vue3 + Element Plus 实战:App 版本管理后台——动态生成下载二维码与封装文件上传
前端·javascript·vue.js
比特森林探险记7 小时前
Vue基础语法与响应式系统详解
前端·javascript·vue.js
zihan03218 小时前
element-plus, el-table 表头按照指定字段升降序的功能实现
前端·vue.js·状态模式