vue2 dialog规范

父组件：

1.引入子组件

2.向子组件传递数据

<template>
  <edit
      :title="edit.title"
      :visible="edit.visible"
      :form-data="edit.formData"
      :remote_close="remoteClose"
    />
</template>
<script>
import edit from './edit.vue'
export default {
  components: {
    edit
  },
data () {
    return {
       edit: {
        title: '',
        visible: false,
        formData: {

        }
      }
  }
},
methods:{
    // 新增 id作为新菜单的parentid
    openAdd (id) {
      // id=0是在条件查询的地方点击的，是新增一级菜单，否则新增的是某菜单下的子菜单
      this.edit.formData.parentId = id
      this.edit.title = '新增'
      this.edit.visible = true
    },
    // 关闭窗口
    remoteClose () {
      this.edit.formData = {}
      this.edit.visible = false
      this.fetchData()
    },
// 操作-->编辑
    handleEdit (id) {
      api.getById(id).then(response => {
        if (response.code === 20000) {
          this.edit.formData = response.data
          this.edit.title = '编辑'
          this.edit.visible = true
        }
      })
    },

}

</script>

子组件

1、接收参数，使用

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="500px"
    :before-close="handleClose"
  ></el-dialog>
<template>
<script>
export default {
  props: {
    title: { // 弹框标题
      type: String,
      default: ''
    },
    visible: { // 弹框是否弹出
      type: Boolean,
      default: false
    },
    formData: { // 提交表单数据
      type: Object,
      default: {}
    },
    remote_close: Function // 用于关闭窗口
  },
methods:{
    //  提交表单数据
    submitForm (formData) {
      this.$refs.formDataRef.validate((valid) => {
        if (valid) {

          // 提交数据(接口调用)
          this.submitData()
        } else {
          return false
        }
      })
    },
   // 取消提交
    handleClose () {
      this.$refs.formDataRef.resetFields()
      this.remote_close()
    }
}
}
</script>