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

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

相关推荐
一 乐7 小时前
医院挂号|基于springboot + vue医院挂号管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·医院挂号管理系统
Watermelo61710 小时前
理解 JavaScript 中的“ / ”:路径、资源与目录、nginx配置、请求、转义的那些事
前端·javascript·vue.js·chrome·nginx·正则表达式·seo
|晴 天|13 小时前
[特殊字符]️ Vue 3项目架构设计:从2200行单文件到24个组件
前端·javascript·vue.js
Ruihong13 小时前
Vue v-html 与 v-text 转 React:VuReact 怎么处理?
vue.js·react.js·面试
Fisschl13 小时前
Vue 封装 Echarts 组件
vue.js
前端那点事15 小时前
Vue路由跳转全场景实战(Vue2+Vue3适配)| 新手必看
vue.js
|晴 天|15 小时前
Element Plus 组件库实战技巧与踩坑记录
前端·javascript·vue.js·typescript
llf_cloud15 小时前
Vue2 项目中的全局自动弹窗队列设计
前端·javascript·vue.js
一条小鲨鱼16 小时前
所遇到的响应式问题
前端·vue.js
Ruihong16 小时前
你的 Vue v-for,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试