vue el-dialog is encapsulated into sub-components (componentization)

Preface

• In the actual development process, we often hear about component development, but how can it be convenient during the actual development process (when no one is reviewing it)

• Sometimes we write all the code on one page because of lack of time. When the business logic is complex, there may be more than 1k rows

• Although you cannot ask yourself to write efficient and reusable components, it is still possible to write the dialog pop-up box as a sub-component and remove it.

• When you extract the form, you will find that the code is much less

Code

1. Create the components folder under the file and create the DialogForm.vue file

<template>
  <div>
    <el-dialog
      title="表单"
      :visible="dialogVisible"
      width="45%"
      @close="handleClose"
    >
      <span>子组件弹出框</span>
      <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>
  </div>
</template>
​
<script>
export default {
  name: 'DialogForm',
  props: {
    DialogFlag: {
      default: false
    }
  },
  data () {
    return {
      // 开关
      dialogVisible: false,
    }
  },
  watch: {
    DialogFlag () {
      this.dialogVisible = this.DialogFlag
    }
  },
  created () {
    console.log('审批页面执行')
  },
  methods: {
    // 表单关闭事件-通知父组件关闭（.syanc）
    // 不通知父组件可能会报错，导致只能打开一次
    handleClose () {
      this.$emit('update:DialogFlag', false)
    },
  }
}
</script>

2. Used in index.vue page

// 引入组件
import DialogForm from './components/DialogForm.vue'
​
//注册组件
 components: {
    DialogForm
  },
  
//data
 DialogFlag: false
​
// html
<DialogForm :DialogFlag.sync="DialogFlag" />
​
// 使用组件
  <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="examinadd"
              >打开表单</el-button
            >
            
 examinadd () {
      this.DialogFlag = true
    },

---

Summarize:

After this process, I believe you have also had an initial deep impression on vue el-dialog encapsulated into sub-components (componentization), but in actual development the situations we encounter are definitely different, so we need to understand it Principle, never change from its origin. Come on, hit the workers!

Please point out any shortcomings, thank you - Feng Guo Wuhen