注明: 采用了一个很 low 的方法 来实现任意组件间的函数调用，也可以说是事件传递。

子组件调用父组件函数

在子组件中可以   通过 emit 函数触发父组件中自定义的事件，通过事件绑定调用父组件函数。

父组件调用子组件函数

在父组件中， 通过在子组件上绑定一个 ref  值，  然后直接调用子组件的函数

任意组件间函数调用

找一个或一些组件，使得俩个组件之间有一些联系，然后使用上面两个方法，不断的将函数传递下去

上代码

子组件通过触发父组件的事件来调用父组件的函数

//父组件的html代码
<parent  @myEvent="parentFunction">
    <child></child>
</parent>



//父组件的js代码  (单文件组件写法)

methods:{
    parentFunction: function(){
          //codes
    }
}


//子组件js代码, 
methods: {
    callParents: function(){
    this.$emit("myEvent",args);    
    
    //myEvent是事件名，要与父组件监听（@myEvent）对应，
    // args 是要传递参数，这就随便了。想传什么传什么

    }
}

父组件调用子组件函数，可以说是一个   Js语句   直接调用了，

//父组件的html代码，
<parent>
    <child  ref="child" ></child>       <!--  ref 后面的值是自己定义的  -->
</parent>



//父组件的js代码  (单文件组件写法)

methods:{
    parentFunction: function(){
       this.$refs.child.childFunction(params);
        
    //注意两个点对应，  一个是自己定义的 ref 值，  二是子组件的函数名

    }
}


//子组件js代码, 
methods: {
    
    childFunction: function(params){
        //codes
    }
}

任意组件间的通信

组件A ， 组件  B，  组件C

现在 B 组件要调用  组件 C  中的函数。

假如 组件 A 是 B  和 C 的父组件，

就先用 emit 触发A的事件，在A事件的调用函数中，调用C组件的函数

假如  组件 A 是 B 的子组件 、 C 的父组件 。

就直接调用函数， B 调用 A 的函数 ，在被调用的函数中 ，调用 C 组件的函数

其他情况同理                          Ok ，优秀