vue中父子组件的传值和调用方法

子组件：
<template>
 <div>
  <!-- 树结构 -->
  <el-tree
   :data="treeData"
   @node-click="handleNodeClick"
   :default-expand-all="true"
   :props="defaultProps"
  >
  </el-tree>
 </div>
</template>

<script>
/**
 * 本来是想将台站选择和返回按钮统一封装进来
 * 但是考虑后续的页面所需要的展示效果不同，所以只封装了tree
 */
export default {
 props: ['treeData', 'defaultProps'],
 data() {
  return {}
 },
 methods: {
  // 将 tree 的点击事件传给父组件
  handleNodeClick(node) {
   return this.$emit('treeClick', node)
  },
 },
 mounted() {},
}
</script>

<style scoped>
.el-tree {
 top: 5px;
}
</style>

父组件：
import Tree from './Tree'

 components: {
  Tree, // 注册组件
 },

template中使用：
<tree :treeData="treeData" :defaultProps="defaultProps" @treeClick="handleNodeClick"></tree>

// 点击 tree 节点（接收tree子组件使用 this.$emit 传过来的事件和参数）
  handleNodeClick(node) {
   console.log(node.label)
  },

主要：在父组件中传递一个方法给子组件即 @treeClick，然后在子组件中通过 this.$emit('treeClick', params) 来调用 treeClick 所对应的方法 handleNodeClick