vue2中组件间传递数据时,在monted中调用method中的函数提示未定的解决方案

一、最近在使用vue2开发时需要在monted中接收兄弟组件传递的事件，然后执行method中的函数。这里说依稀思路及当时遇到的问题。

二、组件之间传递可以用$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()

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com