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部分

相关推荐
九丝城主11 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克16 小时前
七、性能优化
flutter·性能优化
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克1 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter