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

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

相关推荐
Summer不秃30 分钟前
使用 SnapDOM + jsPDF 生成高质量 PDF (含多页分页, 附源码)
前端·javascript·vue.js·pdf·node.js
仰望.1 小时前
vxe-table 如何实现分页勾选复选框功能,分页后还能支持多选的选中状态
前端·vue.js·vxe-table
licongmingli1 小时前
vue2 基于虚拟dom的下拉选择框,保证大数据不卡顿,仿antd功能和样式
大数据·前端·javascript·vue.js·anti-design-vue
小沐°1 小时前
vue3-父子组件通信
前端·javascript·vue.js
Tiramisu20232 小时前
【VUE】删除 node_modules几种高效方法
前端·javascript·vue.js
Irene19912 小时前
在 Vue 3 的 setup() 函数中,this 是 undefined。
vue.js·this
林恒smileZAZ2 小时前
vue对接海康摄像头-H5player
前端·javascript·vue.js
小安同学iter3 小时前
Vue3 进阶核心:高级响应式工具 + 特殊内置组件核心解析
前端·javascript·vue.js·vue3·api
Roc.Chang3 小时前
Vue 3 setup 语法糖 computed 的深度使用
前端·javascript·vue.js
淡笑沐白3 小时前
Vue3基础语法教程
前端·javascript·vue.js