props emit 使用备忘

1. 需求描述

由父组件传递参数至子组件，子组件携带参数进行网络请求，处理业务。业务处理完毕，子组件成功事件触发父组件关闭弹窗。

2. 解决

使用props传递参数，并监听改变。参数发生改变时重新请求刷新子组件，使用emit修改父组件关闭弹窗。

<!--在父组件中使用子组件传递参数--><flow-chart<!--参数传递-->:process-params="processParams"<!--子组件中使用emit调用父组件的方法实现关闭父组件弹窗-->@changeProcessJumpStatus="changeProcessJumpStatus"
/>

<!--子组件接收父组件传递的参数-->props: ['processParams'],

<!--监听父子间传递的参数，若发生改变则发起网络请求刷新子组件-->watch: {/** 监听父组件所传参数，发生变化刷新子组件，从新渲染新的流程图* */processParams: {// 深度监听deep: true,handler(newVal, oldVal) {// 流程图弹窗关闭清除渲染内容if (newVal === null) {this.processData = nullthis.$refs.diagramCanvas.innerHTML = ''} else {// 请求数据渲染新的流程this.fetchProcessData()}}}},

// 子组件调用父组件的方法关闭dialog
this.$emit('changeProcessJumpStatus')