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

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

相关推荐
芭拉拉小魔仙4 小时前
企业级Vue项目的状态管理:从原理到实战架构
前端·vue.js·架构
扶苏10024 小时前
Vue 3 响应式原理深度解析
前端·javascript·vue.js
哆啦A梦15889 小时前
Vue3魔法手册 作者 张天禹 06_监控
前端·vue.js·typescript
扶苏100211 小时前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
css趣多多14 小时前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
014-code15 小时前
Vue3 性能优化实战
前端·vue.js·性能优化
css趣多多16 小时前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
哆啦A梦158816 小时前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦158817 小时前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
一叶星殇17 小时前
Windows 下用 Nginx 部署 Vue + .NET WebApi 全流程实战
vue.js·windows·nginx