vue--觸發父子組件事件

項目接觸多了，用vue開發項目比較喜歡組件化，一個彈框，一個模塊都可能寫成子組件

<!--左側彈框-->
<DrawerCount :bureauItem="bureauItem" ref="drawerCount" :isShow="show" @closeDrawer="closeDrawer"/>

父組件觸發子組件事件

這時需要觸發子組件的事件，例如顯示左側彈框時需要觸發事件調接口查數據，子組件的方法是getTimeChannel() 

this.$refs.drawerCount.getTimeChannel();

這樣子組件的事件就可以了觸發了

子組件觸發父組件事件

當然也會用到子組件要觸發控制父組件事件，

首先在子組件中寫一個方法

closeDrawer() {
    this.$emit('closeDrawer',false)
}

這樣就可以觸發父組件的事件了

closeDrawer() {
    this.show = false;
}

子組件觸發子組件事件

 

這里我想add組件（新增功能）新增成功后，關閉add組件（彈框），同時刷新list組件（展示列表）數據

父組件：

<keep-alive :include="componentIncludeList">
    <component :is="currentView" @componentView="changeView" ref="list" :currentData="currentData"></component>
</keep-alive>

changeView(view, obj) {
    this.currentView = view;
    this.currentData = obj;
},

add子組件：

this.$emit("componentView", "list");

list子組件：

mounted() {
    this.getTableItem();  
}

這個例子貌似不太好，下次補充

注意：$emit這里的false,可以是一個對象，一個數組