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

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

相关推荐
英俊潇洒美少年19 小时前
Vue3 深入响应式系统
前端·javascript·vue.js
angerdream1 天前
最新版vue3+TypeScript开发入门到实战教程之路由详解三
前端·javascript·vue.js
数据潜水员1 天前
三层统计最小力度的四种方法
javascript·vue.js
英俊潇洒美少年1 天前
Vue3 的 JSX 函数组件,每次更新都会重新运行吗?
前端·javascript·vue.js
Irene19911 天前
Vue3 响应式系统核心对比:effect, track, trigger,computed, watch, watchEffect
vue.js
saadiya~1 天前
从插件冗余到极致流畅:我的 Vue 3 开发环境“瘦身”实录
前端·javascript·vue.js
慧一居士1 天前
Zod 功能、使用场景介绍以及对应场景使用示例
前端·vue.js
Irene19911 天前
Vue3 举例说明如何编写一个自定义组合式函数(与 Mixins 相比的优势)
vue.js
小马_xiaoen1 天前
Vue 3 + TS 实战:手写 v-no-emoji 自定义指令,彻底禁止输入框表情符号!
前端·javascript·vue.js
Highcharts.js1 天前
Highcharts Gantt 实战:从框架集成到高级功能应用-打造现代化、交互式项目进度管理图表
前端·javascript·vue.js·信息可视化·免费