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是从插槽作用域绑定中获取的值。

1. :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部分