一、首先实现一个子组件

在components文件夹中创建一个HelloWorld.vue组件
在这里插入图片描述
具体代码如下：（子组件中是一个表单）

<template>
  <!--子组件-->
  <div class="page-content">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="ruleForm.province"></el-input>
      </el-form-item>
      <el-form-item label="市区" prop="city">
        <el-input v-model="ruleForm.city"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    actionTypeProps: {
      type: String,//类型
      default: "",//默认值
    },
    formDataProps: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {
        name: "",
        province: "",
        city: "",
        address: "",
        desc: "",
      },
      rules: {
        name: { required: true, message: "请输入名称", trigger: "blur" },
        province: { required: true, message: "请输入省份", trigger: "blur" },
        city: { required: true, message: "请输入市区", trigger: "blur" },
        address: { required: true, message: "请输入地址", trigger: "blur" },
        desc: { required: true, message: "请输入备注", trigger: "blur" },
      },
    };
  },
  watch: {
    actionTypeProps: {
      handler(val) {
        // console.log(val)打印出的val是监听的对象的值
        if (val === "edit") {//当父组件点击编辑是给表单对象赋值
          Object.assign(this.ruleForm, this.formDataProps);
        } else {// 否则用Object.assign 重置表单对象
          Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
          this.getNewVal();
        }
      },
      immediate: true,
    },
  },
  methods: {
    getNewVal() {
      // 模拟异步请求
      setTimeout(() => {
        this.ruleForm.address = "广东省深圳市南山区";
      }, 100);
    },
    submitForm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

注：

name: “HelloWorld” ：组件名称，export default导出子组件
props ：接受来自父组件的参数
vue watch 的属性 handler方法就相当于普通侦听器触发的事件,即:当数据变化时要执行的操作
immediate:true 立即执行 :当刷新页面时会立即执行一次handler函数
使用场景:
不加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在在2-1位置
vue中 this. $o pt i o n s . d a t a () 可以获取原始的 d a t a 值（只读）， t hi s .$ data 获取当前状态下的data,在重置data数据时，拷贝重新赋值一下就行了

二、实现一个父组件并调用子组件

在views文件夹下创建一个HomeView.vue文件
在这里插入图片描述
具体代码如下：（父组件实现新增编辑共用一个抽屉子组件）

<template>
  <!--父组件-->
  <div class="home">
    <el-button style="float: right;margin-bottom: 20px" @click="addHandle">新增</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="province" label="省份" />
      <el-table-column prop="city" label="市区" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" @closeDrawer="closeHandle">
      <hello-world :actionTypeProps="actionType" :formDataProps="formData" />
    </el-drawer>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      drawer: false,
      actionType: '',
      direction: 'rtl',
      formData: {},
      tableData: [{
        name: '设备1',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        name: '设备2',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  },
  methods: {
    // 新增
    addHandle() {
      this.actionType = 'add'
      this.formData = {}
      this.drawer = true
    },
    // 编辑
    editHandle(row) {
      this.actionType = 'edit'
      this.formData = row
      this.drawer = true
    },
    // 关闭抽屉
    closeHandle() {
      // 重置表单
      this.drawer = false
    }
  }
}
</script>