【Vue.js】兄弟组件之间调用对方的方法

参考：Vue兄弟组件之间如何调用对方的方法

概述

兄弟组件之间的通讯有一个方法是通过父组件进行交互，那么解决的思路就是子组件调用父组件的方法，然后父组件调用另一个子组件的方法，这样就实现了兄弟组件的交互功能。

父组件调用子组件方法

1. 首先被父组件调用的子组件方法定义一下

appendToTree({param}){
   console.log('这是子组件tree的方法')
},

1. 父组件parent.vue中的子组件加一个ref属性，就相当于给这个子组件取了一个别名。注意，这个是加在需要调用的子组件上的。

<treeModel ref="tree"></treeModel>

1. 父组件的方法中通过this.$refs的方式来调用子组件的方法

//这个是父组件的方法，名字随便定义
childTreeFn({param}){
    console.log('参数',param)
    //因为要调用的是别名为tree的子组件中定义的appendToTree方法，所以就这么写
    this.$refs.tree.appendToTree({param});
}

子组件调用父组件方法

1. 在子组件上添加一个事件（或者别名？对前端的专业术语不了解），名字随便取，值是准备调用的父组件方法

<child @parentFn="childTreeFn"></child >

1. 在子组件中通过$.emit方法来调用父组件的方法

//子组件的方法名，随便取
submit() {
    //因为要调用的是事件为parentFn，后面跟上参数
    this.$emit('parentFn',{param:this.argument});
},