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

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

相关推荐
吹牛不交税5 小时前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD0017 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
_codemonster8 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
wqq631085511 小时前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng94520131411 小时前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
Hello.Reader11 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
EchoEcho13 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒13 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜15 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御15 小时前
如何给用户添加权限
前端·javascript·vue.js