el-dialog parent-child value-passing pop-up window implementation (write separately when there are many pop-up window contents)

Requirements: The parent component clicks the button to open the pop-up window, but because the content of the pop-up window is huge, it is directly extracted, and the pop-up window is only displayed when the parent component is clicked, and the value is passed to the pop-up window for data echo, editing or adding functions It will be all right.

 

 

 1. First establish a parent-child relationship

Create a pop-up window component dialog.vue, and throw the content of the pop-up window into it

The parent component introduces the registration mount, and sets the value of v-if, the default is false, and the ref should also be set, bind the node, and need to pass the value to the child component through the ref transfer function when clicking

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

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

2. The parent component writes the content, click to pass the current line to the child component

The key code of the parent component, the init function and pass the current line to the child component, the complete code is finally pasted

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

3. The self-component of the pop-up window accepts the value passed from the parent component in methods

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

4. The complete code of the parent component

<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. Subcomponent complete code

The operations are all done in the child component, including the editing interface call, the parent component just passes the value and opens the pop-up window, and does not perform other operations

<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>

This is the end of the article, I hope it will be helpful to you~