implementación de ventana emergente de paso de valor padre-hijo el-dialog (escriba por separado cuando hay muchos contenidos de ventana emergente)

Requisitos: el componente principal hace clic en el botón para abrir la ventana emergente, pero debido a que el contenido de la ventana emergente es enorme, se extrae directamente y la ventana emergente solo se muestra cuando se hace clic en el componente principal. y el valor se pasa a la ventana emergente para el eco de datos, la edición o la adición de funciones. Todo estará bien.

 

 

 1. Primero establezca una relación padre-hijo

Cree un componente de ventana emergente dialog.vue y arroje el contenido de la ventana emergente en él

El componente principal introduce el montaje de registro y establece el valor de v-if, el valor predeterminado es falso y la referencia también debe configurarse, vincular el nodo y debe pasar el valor al componente secundario a través de la función de transferencia de referencia cuando hacer clic

 <Dialog v-if="showDialog" ref="dialogData"></Dialog>

import Dialog from './dialog.vue';
export default {
    components: {
        Dialog
    },
}

2. El componente principal escribe el contenido, haga clic para pasar la línea actual al componente secundario

El código clave del componente principal, la función init y pasar la línea actual al componente secundario, finalmente se pega el código completo

 openDialog(row) {
            this.showDialog = true;
            this.$nextTick(() => {
                // 每次都传递当前行数据
                this.$refs.dialogData.init(row);
            });
        }

3. El componente propio de la ventana emergente acepta el valor pasado del componente principal en los métodos

    init(rowdata){
//打开弹窗
        this.dialogVisible = true;
//接收父组件的值
        this.data=rowdata
        console.log(this.data,'接受传递的值');
    },

4. El código completo del componente padre

<template>
    <div class="content-box">
        <div class="container">
            <h1>弹窗的拆分</h1>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
                <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
                <el-table-column prop="province" label="省份" width="120"> </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="openDialog(scope.row)" type="text" size="small">
                            打开弹窗
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Dialog v-if="showDialog" ref="dialogData"></Dialog>
        </div>
    </div>
</template>

<script>
import Dialog from './dialog.vue';
export default {
    components: {
        Dialog
    },
    data() {
        return {
            showDialog: false,
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海'
                },
                {
                    date: '2022-12-11',
                    name: '张三',
                    province: '武汉'
                },
                {
                    date: '2016-05-03',
                    name: '李四',
                    province: '上海'
                }
            ]
        };
    },
    mounted() {},
    methods: {
        openDialog(row) {
            this.showDialog = true;
            this.$nextTick(() => {
                // 每次都传递当前行数据
                this.$refs.dialogData.init(row);
            });
        }
    }
};
</script>

<style lang="scss" scoped></style>

5. Código completo del subcomponente

Todas las operaciones se realizan en el componente secundario, incluida la llamada de la interfaz de edición, el componente principal simplemente pasa el valor y abre la ventana emergente, y no realiza otras operaciones.

<template>
 <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  {
   
   { data }}
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
        dialogVisible: false,
        data:{}
    };
  },
  mounted() {

  },
  methods: {
    init(rowdata){
        this.dialogVisible = true;
        this.data=rowdata
        console.log(this.data,'接受传递的值');
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  }
};
</script>

<style lang="scss" scoped>

</style>

Este es el final del artículo, espero que les sea útil~