问题描述：

最近的VUE项目中遇到树形结构的菜单。复用树形的菜单的组件。但需要调用组件最父层的方法。

一般父子间组件用 this.$emit 传递，或者只有一层的情况下用 this.$parent.xxx

可参考：

https://cn.vuejs.org/v2/guide/components-custom-events.html

https://blog.csdn.net/wpj130/article/details/70318073

https://segmentfault.com/q/1010000009748858

但是树形结构一直复用自己的组件。层级不定而且较深。

解决方案：

子组件中调用父组件方法侦听和触发。父组件继续定义该触发方法。

代码片段，代码不全，仅供参考

父组件

<ul v-for="menuItem in theModel">
	<my-tree :model="menuItem" v-on:childMethod="parentMethod"></my-tree><!-- 组件绑定侦听 -->
</ul>

export default {
  components: {
    myTree
  }
  ,
  data() {
    return {
      theModel: myData
    }
  },
  methods:{
 	
 		parentMethod(parm){//父组件方法
 			console.log("parentMethod 父");console.log(parm);
 		}
 	}
}

子组件

<tree-menu v-for="item in model.children" :model="item" v-on:childMethod="parentMethod"></tree-menu><!-- 子组件继续抵用因为树形结构的组件一直调用本身 -->

export default {
   name: 'treeMenu',
   props: ['model'],
   data() {
     return {
       open: false,
       isFolder: this.model.children && this.model.children.length
     }
   },
   computed: {
 
   },
   methods: {

    parentMethod(parm){
    	console.log("parentMethod 子"); this.$emit('childMethod','childParam');//子组件继续侦听并触发子组件(实为自己的父组件)方法
    },
     toggle: function(menuKey) {
       if (this.isFolder) {
         this.open=!this.open
       } else {
       	
       	if(menuKey && ''!=menuKey){
       		this.$router.push({ path: '/docFrame/docWords/'+menuKey }) ;
       		console.log(this);
       		this.$emit('childMethod','childParam'); //向父组件触发一个事件
       	} else {
       		console.log("menuKey 为空",menuKey);
       	}
       	
       }
     }
   }
 }

触发方法执行结果：

parentMethod 子
 parentMethod 子
 parentMethod 子
 parentMethod 父
 childParam

用词不准确，勿怪。

以上这是我的大概解决思路。欢迎有更好的解决方案在下面评论。