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