primevue的<Menu>组件

1.使用场景

2.代码

1.给你的menu组件起个引用名

2.<Menu>组件需要一个MenuItem[]

3.你要知道MenuItem[ ]的特殊的数据格式,就像TreeNode[ ]一样,数据格式不对是不渲染的。。。。

常用的属性就这几种,js语言和java不一样,Java靠类名识别类的数据结构

js靠数据结构来判断这个数据是哪一类型的。。。。也是很癫了,

这就是为什么在js里很少见到 声明一个对象{ }的类型,因为人家压根不cue,

换句话说,你把这个{ }的数据结构写的像什么对象,他就是什么对象。。。。。。。哪有类型

4.点击事件触发的函数要获取到本行的业务数据

3.源码

toggle这个方法会隐式传递一个参数过去

类似用法

4.语法

  1. 插槽(Slot)语法

    • <template #body="{ node }">是Vue.js中的插槽语法。在Vue组件中,插槽用于在父组件中向子组件传递内容。这里的#body表示具名插槽(named slot),它的名称是body
    • 花括号中的{ node }表示插槽作用域绑定。这意味着父组件在使用这个插槽时,可以将一个包含node属性的数据对象传递给子组件中的这个插槽。
  2. 事件绑定语法

    • <Button type="button" icon="pi pi - ellipsis - v" @click="toggle(node,$event)" aria - haspopup="true" aria - controls="overlay_menu" />
    • 这里的@click是Vue.js中的事件绑定指令。它绑定了一个名为toggle的方法到按钮的click事件上。
    • toggle方法调用时,传递了node变量和$event。其中$event是Vue.js自动提供的,表示触发事件的原生DOM事件对象,而node是从插槽作用域绑定中获取的值。
  3. :model:popup属性绑定

    • <Menu ref="menu" id="overlay_menu" :model="items" :popup="true"></Menu>中,:开头的属性是Vue.js中的动态属性绑定语法。
    • :model="items"表示将组件内部的model属性与父组件中的items变量进行绑定。这里的items应该是一个在父组件中定义的数据,它可能包含了Menu组件所需要的菜单模型数据,例如菜单项的结构、标签、图标等信息。
    • :popup="true"Menu组件的popup属性绑定为true,这可能用于控制Menu是否以弹出式的方式显示等功能。

5.点击事件发生时,事件对象会被隐式传递给点击事件所绑定的函数

1.首先,为什么没有参数,却可以接到一个事件对象

1.隐式传递:只是原生事件PointerEvent

2.显式传递:也是原生事件PointerEvent。。。。

1.原生事件:看一下调试,主要看target部分

相关推荐
哲科软件8 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风8 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
coder_pig12 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘15 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor15 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao18 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主18 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
ITfeib18 小时前
Flutter
开发语言·javascript·flutter
昱禹18 小时前
Flutter 3.29+使用isar构建失败
大数据·flutter