父子组件传递数据（Vue高级）

1.父子组件传递数据

1)、子组件给父组件传递数据，事件机制；

   子组件给父组件发送一个事件，携带上数据。

// this.$emit("事件名",携带的数据...)

(1)在需要在点击左边树形节点的时，右边表格要展示相应的属性数据，这是就涉及到父子节点传递数据了

 

 (2)解决方法：左边是common中category子节点，右边是attrgroup父节点，父节点引用了子节点，现在需要子节点向父节点在点击时候传递数据。

 

 

（3）在子节点category中添加@node-click方法，并用$emit向外发送事件。（传递三个参数，具体见Element官网树形结构点击触发事件）

 

 

 （4）然后在父节点引用处利用方法接收这个事件，然后方法实现数据的更新查询。

 

 

 

二.分组新增&级联选择器

（1）查看官网找到级联选择器

 

（2）效果

 

 

 

（3）但是在修改回显数据时，级联菜单会回显不出来，这是因为我们表单提交的是最深的节点id而不是整个路径，这时我们需要向服务器传递一个节点id，然后返回一个完整的路径，

并回显在表单中。

　　1.首先，在点击修改时，触发方法，调用方法，显示修改框（true），在页面加载完成后，调用整个页面对象（$refs）的addOrUpdate的init方法

　　addOrUpdate就是修改页面，然后调用它的init方法。

 

 

 

 

 

 

 

 

回显表单数据

 

 

  修改递交表单时

 

 

 

 后端在实体类中添加完整路径属性

 

controller添加path到对象中去

 

具体service方法实现，递归找到完整路径并返回