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