1. 程式人生 > >vue2中元件間傳遞資料時,在monted中呼叫method中的函式提示未定的解決方案

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()