vue非父子组件间传递数据，不能在monted中method中的函数解决方案

2018-12-10 16:40:42  卢浮宫  版权声明：本文为站长原创文章，转载请写明出处

一、背景

    最近在使用vue2开发时需要在monted中接收兄弟组件传递的事件，然后执行method中的函数。

    这里说一下思路及当时遇到的问题。（下期更新vue中父子组件之间互相传递事件方法，敬请关注！）

二、非父子组件之间传递可以用$emit和$on来进行操作，具体如下：

    在A组件中写一个事件（click，change...）在事件中使用$emit创建一个自定义事件，示例如下：bus.$emit("changepartname",name);

    在B组件中接收A传递的事件，示例如下：

    mounted(){
        bus.$on("changepartname",(name)=>{
            //可以在这里进行data的修改以及函数调用，如：
            this.showMessage("asdf");
        }
    }

    然后在method中定义showMessage方法即可。

三、这里需要注意的是：

    ①在es6中引入了箭头函数（为了更好解决域的问题）

    ②可以看到上面changepartname是用了箭头函数的，如果写成bus.$on("changepartname",function(name){} 这时就会报函数未定义的错误。

四，后记

    可以看到上面有一个bus的定义，这个可以理解为一个中间件，首先我们要在A、B中引入定义好的bus.js，

    示例如下：import bus from "../../views/eventbus/eventbus.js"; 这个bus.js内容如下：

        import Vue from "Vue"
        export default new Vue()

    以上就是vue非父子组件间传递数据,不能在monted中method中的函数解决方案的全部内容，持续更新中欢迎订阅关注。

    纯手打，如有不当之处敬请斧正。也希望在对大家产生作用的同时多多关注交流！