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

相关推荐
Wakeup13 分钟前
当Flutter下载依赖慢,运行在Android上卡Running Gradle task ‘assembleDebug...解决方法
flutter
你听得到111 小时前
告别重复造轮子!我从 0 到 1 封装一个搞定全场景的弹窗库!
前端·flutter·性能优化
恋猫de小郭12 小时前
Flutter 3.35 发布,快来看看有什么更新吧
android·前端·flutter
w_y_fan20 小时前
flutter_riverpod: ^2.6.1 应用笔记 (一)
前端·flutter
耳東陳125120 小时前
【重磅发布】flutter_chen_azlist - A–Z索引列表
flutter
tangweiguo030519871 天前
面向对象编程三剑客:Dart、Java 和 Kotlin 的核心区别
android·flutter·kotlin
叽哥1 天前
flutter学习第 17 节:项目实战:综合应用开发(下)
android·flutter·ios
叽哥1 天前
flutter学习第 16 节:项目实战:综合应用开发(上)
android·flutter·ios
月伤592 天前
Flutter屏幕和字体适配(ScreenUtil)
flutter
叽哥2 天前
flutter学习第 14 节:动画与过渡效果
android·flutter·ios