This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

An overview,

The Dialog Dialog box is used in editing, adding and other operations. Instead of writing it all in one component, we want to write a Dialog component again and reuse it as a sub-component, which involves the transmission of values between father and son components.

Second, custom content

The contents of a Dialog component can be arbitrary, even a Table or Form, and two examples of the Table and Form components of Element are used here.

<el-button type="text" @click="dialogTableVisible = true"> Open a nested table Dialog</el-button><el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="Date" width="150"></el-table-column>
    <el-table-column property="name" label="Name" width="200"></el-table-column>
    <el-table-column property="address" label="Address"></el-table-column>
  </el-table>
</el-dialog>
 
<el-button type="text" @click="dialogFormVisible = true">Opens the Dialog for the nested form</el-button>
 
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="Activity Name" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="Active area" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="Please select the active area.">
        <el-option label="Zone one" value="shanghai"></el-option>
        <el-option label="Area two" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">Take away</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">determine</el-button>
  </div>
</el-dialog>
 
<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai}].dialogTableVisible: false.dialogFormVisible: false.form: {
          name: ' '.region: ' '.date1: ' '.date2: ' '.delivery: false.type: [].resource: ' '.desc: ' '
        },
        formLabelWidth: '120px'}; }};</script>
Copy the code

Click on the Dialog to open the nested form:

3. Value transfer between components

In actual development, a separate VUE file is created for the Dialog Dialog. This way, the maintenance page is more convenient. Not in a total VUE file, involving thousands of lines of code.

The following uses a small demo, combined with the Dialog Dialog, to demonstrate the transfer of values between components.

Goal:

  1. Parent helloWorld.vue, click the Add button to call the child goods.vue,

  2. The Dialog Dialog box is displayed. Input form data

  3. The form data is passed back to the parent component helloWorld.vue

Create a new ElementUI project and modify the file helloWorld.vue as follows:

<template>
  <div class="hello">
    <el-row>
      <el-button type="primary" @click='add()'>add</el-button>
    </el-row>// Use child components<Goods ref="gds" @children="parentGoods" />
  </div>
</template>
 
<script>
  import Goods from "./Goods";
 
  export default {
    name: 'HelloWorld'.// Register the component
    components: {
      Goods
    },
    methods: {
      add() {
        // A dialog box is displayed
        this.$refs.gds.showDialog()
      },
      // Child component passes value to parent component - goods
      parentGoods(obj) {
        // Prints the value passed by the child component
        console.log("parentGoods",obj)
      }
    }
  }
</script>
 
<style scoped>
</style>
Copy the code

In the HelloWorld. Vue directory, create a new file goods. vue

<template>
  <el-dialog title="Added goods" :visible.sync="dialogFormVisible" width="500px">
    <el-form :model="form">
      <el-form-item label="Name of Goods" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" style="width: 218px"></el-input>
      </el-form-item>
      <el-form-item label="Origin of Goods" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select the active area.">
          <el-option label="Shanghai" value="shanghai"></el-option>
          <el-option label="Beijing" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">Take away</el-button>
      <el-button type="primary" @click="setGoods()">determine</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
  export default {
    name: "Goods".data() {
      return {
        dialogFormVisible: false.form: {
          name: ' '.region: ' ',},formLabelWidth: '120px'}},methods: {
      showDialog() {
        this.dialogFormVisible = true
      },
      setGoods(){
        $emit fires events on the current instance
        // Trigger the children event of the parent component to pass this.form back
        this.$emit('children'.this.form)
        // Close the dialog box
        this.dialogFormVisible = false}}}</script>
 
<style scoped>
</style>
Copy the code

$emit(eventName, [… args])] —- triggers events on the current instance. Additional parameters are passed to the listener callback.