vue 2 x 之子元件內呼叫父元件的方法

第一種：直接在子元件中通過this.$parent.event來呼叫父元件的方法

這種方式可以無限級別的向上找父級，例如：this.$parent.$parent.$parent.$parent.event,子元件也不需要props屬性接收父元件的方法，但是多層級的時候容易搞亂層級，.$parent太多了

父元件

子元件

點選

第二種：父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法

父元件內呼叫子元件的時候需要顯示的傳入方法（注意：這裡是用的:傳入方法），子元件還需要通過props接收父元件傳來的方法，否則也不可以呼叫，另外就是多層級的時候需要一層一層的往下傳，這時候就比較繁瑣

父元件

子元件

點選

第三種：子元件裡用$emit向父元件觸發乙個事件名（注意：這裡是用的@傳入方法），父元件監聽這個事件名就行了,子元件不需要通過props接收父元件傳來的方法，否則也不可以呼叫，這種最好向上傳遞一層父級，否則也需要層層傳遞

父元件

子元件

點選

第四種：使用$emit和$on配合傳遞事件

如果僅僅是父子一層，傳遞事件就使用第三種就可以了，如果多層傳遞或者是兄弟元件，還可以使用$emit和$on配合，其原理就是new 乙個vue例項，然後在父子元件引入這個例項，這樣在子元件觸發的事件就會在父元件監聽到了，這就是網上說的eventbus。

新建乙個bus.js

import vue from 'vue';
export default new vue();

在父子元件分別引入這個bus.js

import eventbus from 'bus';

在子元件觸發事件

export default 
}};

在父元件監聽事件

export default 
};

當然如果你覺得建乙個bus.js檔案多餘的話，可以在main.js裡把bus加到原型上

//vue原型鏈掛載匯流排
vue.prototype.eventbus = new vue();

加到原型上的好處就是全域性都可以使用了

// 廣播事件 name
this.eventbus.$emit('name');
//解綁事件 name ，如果出現多次監聽，肯定是沒有解綁，可以在監聽之前解綁，也可以在進入到這個路由或者渲染元件時候解綁一下就好了
this.eventbus.$off('name');
// 監聽事件 name，並執行事件 this.closemenu
this.eventbus.$on('name', this.closemenu);

name ：只是乙個標識，不需要是真實存在元件內的方法

vue 2 x 之子元件內呼叫父元件的方法

Vue2 x 新增element UI 元件

vue2 x中的父子元件

Vue2 x中的父元件傳遞資料至子元件的方法

vue 2 x 之子元件內呼叫父元件的方法

Vue2 x 新增element UI 元件

vue2 x中的父子元件

Vue2 x中的父元件傳遞資料至子元件的方法

相關推薦