vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)

<template>
  <div id="app">
    <el-form ref="form" :model="ruleForm" label-width="80px">
      <el-form-item>
        <el-cascader
          :options="optionsWithDisabled" @change="selChange" size="40" placeholder="请选择网上银行类别" filterable=true
        v-model="ruleForm.selValue" style="margin-left:-80px"></el-cascader>
      </el-form-item>
    </el-form>

    <p v-if="baseInfoTask">
      <baseInfo :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :accountLabel="accountLabel"
                :pwdLabel="pwdLabel" v-on:changeEvent="toChange" v-on:loadEvent="toLoad" keep-alive></baseInfo>
    </p>

    <p v-if="captchaTask">
      <captcha :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :taskNo="taskNo"
               v-on:changeEvent="toChange" keep-alive></captcha>
    </p>

    <p v-if="phoneNumTask">
      <phoneNum :bankCode="bankCode" :bankType="bankType" :loginWay="loginWay" :taskNo="taskNo"
                v-on:changeEvent="toChange" keep-alive></phoneNum>
    </p>

    <p v-if="dataSeen">
      <template>
        <el-table v-loading="loading" element-loading-text="正在拉取数据..." element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)" :data="result" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="TT1">
                  <span>{
  { props.row.foreignBill }}</span>
                </el-form-item>
                <el-form-item label="TT2">
                  <span>{
  { props.row.foreignLimit }}</span>
                </el-form-item>
                <el-form-item label="TT3">
                  <span>{
  { props.row.consumeBill }}</span>
                </el-form-item>
                <el-form-item label="TT4">
                  <span>{
  { props.row.paymentBill }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="LL1" prop="billMonth"></el-table-column>
          <el-table-column label="LL2" prop="billDay"></el-table-column>
          <el-table-column label="LL3" prop="paymentEndDay"></el-table-column>
          <el-table-column label="LL4" prop="totalDueAmount"></el-table-column>
          <el-table-column label="LL5" prop="minPaymentAmount"></el-table-column>
          <el-table-column label="LL6" prop="creditLimit"></el-table-column>
          <el-table-colum