生活小妙招之VUE父子组件数据数据传递

我们接下来要做的是选择一个菜单分类，为这个分类新增一个属性分组，并在这个属性分组下面新增属性

搭建成上述页面倒不困难，困难的是点击左边菜单三级分类组件的时候会在右边的属性分组组件有所感知。要达到这个效果就涉及到了父子组件交互的用法了。

由于我们是在属性分组组件中导入的菜单三级分类组件，因此我们想实现的是子组件给父组件传递数据，这里使用的是VUE的事件机制。通过子组件给父组件发送一个事件，并携带上数据，这样父组件在感知到后就可以执行下一步操作了。它类似我们的div冒泡机制，小div的行为可以冒泡给打div。可以通过类比来理解。

如何实现父子组件传递数据？

1. 我们要做什么？在点击了某一菜单后，需要将其告诉父组件。为此我们需要为el-tree绑定单击事件，ElementUI给我们提供了node-click回调事件，在我们点击任意树形控件的节点时触发，我们只需要在该类型的回调事件中编写回调处理函数即可

   node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

   @node-click="nodeClick"
   

   编写nodeClick回调函数：

       nodeClick(data,node,component){
           console.log("触发点击节点事件：",data,node,component);
       }
   

2. 在子组件的回调函数中发送事件，让父组件可以接收到：

       nodeClick(data,node,component){
           console.log("触发点击节点事件：",data,node,component);
           //向父组件发送事件
           //$emit中第一个参数为事件名称，后面可以传任意多个参数
           this.$emit("tree-node-click",data,node,component);
       }
   

3. 父组件去接收事件。上一步骤其实是你在子组件中创建了一种事件类型，名字叫做：tree-node-click。这相当于我们在组建中定义了一种事件类型，就类似点击事件click一样，只不过这种自定义事件类型是在子组件发送事件的时候触发，发送什么类型的事件呢？那就是发送点击树形节点的事件（node-click）时会触发

   //<Category></Category>就是我们引入的子组件
   //import Category from "../common/category.vue";
   //components: { Category},
   <Category @tree-node-click="receiveNodeClick"></Category>
   

   我们使用了tree-node-click类型事件，当点击菜单节点的时候会触发事件，是子组件发出的事件。我们编写receiveNodeClick函数进行回调处理。

       receiveNodeClick(data,node,component) {
         console.log("事件接收：",data,node,component);
       },
   

   我们子组件在发送事件的时候接收的什么参数，父组件在接收事件的时候就可以接收同样的参数。我们可以打印出来便于观察。