VUE 父组件与子组件双向数据绑定的方法 做弹框绑定列表页数据的举例

需求是修改列表页面里面弹框弹出来的值  

1. 先创建弹框  

父组件 主要

 

 

 

   dialogVisibleedit   ，systemlistedit ， systemlist 都是传给子组件的参数   

dialogVisibleedits    是与子组件绑定的值 绑定的是子组件里面的操作状态

   <emergencyedit

          :dialogVisibleedit="dialogVisibleedit"

          :systemlistedit="systemlistedit"

          :systemlist="systemlist"

          @update:dialogVisibleedit="dialogVisibleedits"

        ></emergencyedit>

 

import emergencyedit from "./environmentedit";

 

 components: {  emergencyedit },

methods：{

dialogVisibleedits(v) {

      this.dialogVisibleedit = v;

      // console.log(v);

    },

}

 

 

子组件 主要

<template>

  <el-dialog

    title="环安知识库-编辑"

    :visible.sync="dialogVisibleedit"

    :before-close="cancelDialogedit"

    class="dialog"

  >  </el-dialog>

</template>

1. 用props 接收 父组件的数据 标注好类型

2.

export default {

 props: {

    dialogVisibleedit: {

      type: Boolean,

      default: false,

    },

    systemlistedit: {

      type: Object,

      default: false,

    },

    systemlist: {

      type: Array,

    },

  },

watch: {

    dialogVisibleedit: function (newVal, oldVal) {

      if (newVal) {

        // console.log(newVal);

      }

    },

    systemlistedit(newVal, oldVal) {

      if (newVal) {

        this.enedit = newVal;

        // console.log(this.enedit);

        let objf = {

          name: this.enedit.attachedName,

          url: this.enedit.attachedUrl,

        };

        let objv = {

          name: this.enedit.videoName,

          url: this.enedit.videoUrl,

        };

        this.failse = [objf];

        this.failsev = [objv];

      }

    },

    systemlist(newVal, oldVal) {

      this.systemlistadd = newVal;

    },

  },

}

 methods: {

    cancelDialogedit() {

      this.$emit("update:dialogVisibleedit", false);

    },

 },

 

cancelDialogedit 这个方法用来把关闭状态传到父组件去 实现绑定

 

<template>

  <el-dialog

    title="环安知识库-编辑"

    :visible.sync="dialogVisibleedit"

    :before-close="cancelDialogedit"

    class="dialog"

  >

    <el-form ref="form">

      <div class="dialog-add">

        <div class="dialog-main-son">

          <el-row :gutter="20">

            <el-col :span="12">

              <div class="dialog-main-son-title">编号</div>

              <div class="dialog-main-son-content">

                <el-input

                  v-model="enedit.kbNo"

                  placeholder="请输入内容"

                ></el-input>

              </div>

            </el-col>

            <el-col :span="12">

              <div class="dialog-main-son-title">问题描述</div>

              <div class="dialog-main-son-content">

                <el-input

                  v-model="enedit.description"

                  placeholder="请输入内容"

                ></el-input>

              </div>

            </el-col>

          </el-row>

        </div>

        <div class="dialog-main-son">

          <div class="dialog-main-son">

            <el-row :gutter="20">

              <el-col :span="12">

                <div class="dialog-main-son-title">事件类型</div>

                <div class="dialog-main-son-content">

                  <el-select v-model="enedit.matterType" placeholder="请选择">

                    <el-option

                      v-for="item in knclass"

                      :key="item.calssvalue"

                      :label="item.classtext"

                      :value="item.classtext"

                    >

                    </el-option>

                  </el-select>

                </div>

              </el-col>

              <el-col :span="12">

                <div class="dialog-main-son-title">适用系统</div>

                <div class="dialog-main-son-content">

                  <el-select

                    v-model="enedit.systemId"

                    @change="changesystem"

                    placeholder="请选择"

                  >

                    <el-option

                      v-for="item in systemlistadd"

                      :key="item.id"

                      :label="item.systemName"

                      :value="item.id"

                    >

                    </el-option>

                  </el-select>

                </div>

              </el-col>

            </el-row>

          </div>

        </div>

        <div class="dialog-main-son">

          <div class="dialog-main-son">

            <el-row :gutter="20">

              <el-col :span="12">

                <div class="dialog-main-son-title">使用设备</div>

                <div class="dialog-main-son-content">

                  <el-select

                    v-model="enedit.applyDevice"

                    placeholder="请选择"

                    @change="equipmentchange"

                  >

                    <el-option

                      v-for="item in equipment"

                      :key="item.id"

                      :label="item.deviceName"

                      :value="item.id"

                    >

                    </el-option>

                  </el-select>

                </div>

              </el-col>

              <el-col :span="12">

                <div class="dialog-main-son-title">附件上传</div>

                <div class="dialog-main-son-content">

                  <el-upload

                    class="upload-demo"

                    action="http://192.168.65.71:8090/common/upload"

                    :on-success="filesuccess"

                    :on-error="fileerror"

                    :on-remove="fileremove"

                    :before-remove="beforefile"

                    :limit="1"

                    :file-list="failse"

                  >

                    <div class="updatabotton-parent">

                      <el-button

                        class="updatabotton"

                        size="small"

                        type="primary"

                        v-show="fileupdata"

                        >点击上传</el-button

                      >

                    </div>

                  </el-upload>

                </div>

              </el-col>

            </el-row>

          </div>

        </div>

        <div class="dialog-main-son">

          <div class="dialog-main-son">

            <el-row :gutter="20">

              <el-col :span="12">

                <div class="dialog-main-son-title">视频上传</div>

                <div class="dialog-main-son-content">

                  <el-upload

                    class="upload-demo"

                    action="http://192.168.65.71:8090/common/upload"

                    :on-success="vediosuccess"

                    :on-error="vedioerror"

                    :on-remove="vedioremove"

                    :before-remove="beforevedio"

                    :limit="1"

                    :file-list="failsev"

                  >

                    <div class="updatabotton-parent">

                      <el-button

                        class="updatabotton"

                        size="small"

                        type="primary"

                        v-show="vedioupdata"

                        >点击上传</el-button

                      >

                    </div>

                  </el-upload>

                </div>

              </el-col>

            </el-row>

          </div>

        </div>

      </div>

      <div class="kno-bottom">

        <el-form-item>

          <el-button clkno-bottomass="complete" @click="complete"

            >完成</el-button

          >

        </el-form-item>

      </div>

    </el-form>

  </el-dialog>

</template>