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,可以是一个对象，一个数组

 

转载于:https://www.cnblogs.com/shenpeng/p/10972025.html