<!-- form是子組件的form表單數(shù)據(jù)，meg是子組件彈窗的標(biāo)題（添加或者編輯） -->
 <!-- <add-edit :msg.sync="msg" v-if='msg' :form='form'></add-edit> -->
 <!-- 沒(méi)有使用v-if 是因?yàn)轭l繁點(diǎn)擊編輯和新增的話，性能方面不是很好-->
<template>
 <el-button @click='addClick'>添加</el-button>
 <el-button @click='editClick(scope.row)'>編輯</el-button>
 <!-- 子組件彈窗 -->
 <add-edit :msg.sync="msg" :form='formData'></add-edit>
</template>
<script>
export default {
 data() {
 return {
  formData: {}
 }
 },
 
 methods: {
 addClick() {
 //需要將子組件需要的對(duì)象屬性傳過(guò)去，這一步必須得有，這樣在子組件才可以清空表單
  this.formData = {
  name: '',
  email: '',
  phone: ''
  }
  this.msg = '添加'
 },
 
 editClick(row) {
  this.formData = row;
  this.msg = '編輯'
 }
 }
}
</script>

<template>
 <el-dialog :visible.sync="isShow" width="500px" class="edit-contact" :before-close="closeDialog">
  <span slot="title">{{msg}}聯(lián)系人</span>
  <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules" size="small">
   <el-form-item :label="it.label" :prop="it.prop" v-for="it in formLabel" :key="it.prop">
    <el-input v-model="form[it.prop]" :placeholder="`請(qǐng)輸入${it.label}`"></el-input>
   </el-form-item>
  </el-form>
  <div class="base-btn-action">
   <el-button size="small" type="primary" @click="saveContact">{{form.id?'編輯':'添加'}}</el-button>
   <el-button size="small" @click="closeDialog">取 消</el-button>
  </div>
 </el-dialog>
</template>

<script>
export default {
 props: {
  msg: {
   //“添加”或者“編輯”
   type: String,
   default: ""
  },
  form: {
  //接收父組件傳過(guò)來(lái)得對(duì)象數(shù)據(jù)
   type: Object,
   default: () => {}
  }
 },
 data() {
  return {
   formLabel: [
    { label: "姓名", prop: "name" },
    { label: "郵箱", prop: "email" },
    { label: "聯(lián)系方式", prop: "phone" }
   ],
   rules: {
    name: [{ required: true, message: "請(qǐng)輸入姓名", trigger: "change" }],
    email: [
     { required: true, message: "請(qǐng)輸入郵箱", trigger: "change" },
     { type: "email", message: "請(qǐng)輸入正確的郵箱地址", trigger: ["blur"] }
    ],
    phone: [
     { required: true, message: "請(qǐng)輸入手機(jī)號(hào)", trigger: "change" }
    ]
   }
  };
 },
 computed: {
 //通過(guò)props的數(shù)據(jù)msg的值是否為空來(lái)判斷彈框顯示與否
  isShow() {
   return this.msg === "" ? false : true;
  }
 },
 watch: {
 //監(jiān)聽(tīng)子組件彈窗是否打開(kāi)
  msg(n) {
  //子組件打開(kāi)得情況
    if (n !== '') {
     if (!this.$refs.ruleForm) {
     //初次打開(kāi)子組件彈窗的時(shí)候，form表單dom元素還沒(méi)加載成功，需要異步獲取
      this.$nextTick(() => {
       this.$refs.ruleForm.resetFields() // 去除驗(yàn)證
      })
     } else {
     //再次打開(kāi)子組件彈窗，子組件彈窗的form表單dom元素已經(jīng)加載好了，不需要異步獲取
      this.$refs.ruleForm.resetFields() // 去除驗(yàn)證
     }
    }
   },
 },
 methods: {
  closeDialog() {
   this.$emit("update:msg", "");
   setTimeout(() => {
   //關(guān)閉彈窗的時(shí)候表單也重置為初始值并移除校驗(yàn)結(jié)果
    this.$refs.ruleForm.resetFields();
   }, 200);
  }
 }
};
</script>