第一步给按钮进行点击绑定

<el-button type="text" @click="editSub(scope.row)">修改</el-button>

第二步

编写弹窗出现的条件和需要我们传给子组件的值

<el-dialog
      v-if="dialogVisible"
      :title="isEdit ? '修改学科' : '新增学科'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <subjectadd
        v-if="dialogVisible"
        :dialogVisible.sync="dialogVisible"
        @success="success"
        :row="row"
        :isEdit="isEdit"
      ></subjectadd>
    </el-dialog>

在这个模块中我们会把row传给子组件而且我们的row是一个对象并且由于我们需要多次利用弹窗所以我们需要给弹窗增加一个条件看需不需要我们把值传给子组件

第三步

先写一个弹窗来测试一下我们在父组件写的那些是否有问题,如果没问题的话开始渲染我们的弹窗

第四步

<div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="ruleForm.subjectName"></el-input>
      </el-form-item>

      <el-form-item label="是否显示">
        <el-switch
          v-model="ruleForm.isFrontDisplay"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: end">
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </div>
  </div>

根据上面代码来渲染我们的弹窗

前面说过我们在父组件设置了一个条件看我们是否需要把数据提交给弹窗, 在弹窗这里我们只需要通过watch对它进行深度监听只要isEdit出现我们就会把数据传给弹窗

    isEdit: {
      handler (newval) {
        if (newval) {
          console.log(22222)
          console.log(this.row, 99)
          console.log(JSON.parse(JSON.stringify(this.row)).isFrontDisplay, 99)
          this.ruleForm = JSON.parse(JSON.stringify(this.row))
          
        }
      },
      immediate: true
    }
  }

然后我们就只要数据进行绑定就可以了,但是在我们最后完成弹窗后发现弹窗上一直有一个bug,就是我们的开关一直都只显示一个值,但是它的其他功能都没问题.

然后在请教了很多人后才解决了他. 我们首先在页面的多处进行了断点和数据调试,最后发现我们需要的值isFrontDisplay能获得到但是在渲染到开关时有点问题,然后再别人的提示下我们发现ruleForm是一个对象,而isFrontDisplay只是它里面的一个属性,如果我们需要在子组件修改它的话我们就需要用到 this. $set(属性类,属性名,属性值),来帮我们进行一个转换. ` this.$ set( this.ruleForm, 'isFrontDisplay', this.ruleForm.isFrontDisplay === 1`

老子给儿子的传值

第一步给按钮进行点击绑定

第二步

第三步

第四步