props & emit 使用备忘

Posted 2021-09-06 dingwen_blog

文章目录

• • 1. 需求描述
  • 2. 解决

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 = null
          this.$refs.diagramCanvas.innerhtml = ''
        } else {
          // 请求数据渲染新的流程
          this.fetchProcessData()
        }
      }
    }
  },

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