vue+vantUI的父子组件，编辑和添加是一个组件这个功能怎么处理？

Question

this.type：判断是弹出的应该是编辑框还是添加框，为2就直接打开添加框，然后给他传了个空数组。（添加框这个实现不了）

this.deps：处理点击添加框关闭后，再次点击编辑会多出一次数据。不为空时把数据清空再打开编辑框。

点击编辑和添加是一个组件这个功能该怎么实现？

组件中的代码

流程是点击编辑弹出编辑框，当编辑被点击要弹出编辑框时报错是因为我的判断那里ifelse传过去的数据为空了。

Answer 1

child页面配置：
html：

子组件的script有

props: ["modify"],
data() {
return {
  formDate: [],
  forms: {
    id: "",
    proName: "",
    name: "",
    phone: ""
  },
};
},
watch: {
// immediate: true, // 将立即以表达式的当前值触发回调
// modify: function () {
//   this.forms = this.modify;
//   console.log(this.forms);
// },
modify: {
  handler(newVal) {
      this.forms = newVal;
    if (this.formDate === []) {
      this.formDate.push(this.forms);
    }else{
      this.formDate = [];
      this.formDate.push(this.forms);
    }
  },
  // deep: true, //  watch无法检测到深层key属性时使用
  immediate: true, // watch检测到值变化并且立刻使用
},
},
mounted() {
},
components: {},
methods: {
    // submitForm(formName) {
    // },
    cancel() {
        this.$emit("cancel");
    },
}

父级页面配置：
父组件的script有

import Edit from "./edit";
data() {
    return {
      showEdit: false,
      addTo: true,
      modify: "",
    };
},
mounted() {
},
components: {
    "my-edit": Edit,
},
methods: {
addData() {
      this.showEdit = true;
      this.modify = {
        id: "",
        proName: "",
        name: "",
        phone: "",
      };
    },
    editData(row) {
      this.showEdit = true;
      this.modify = row;
    },
    cancels() {
      this.showEdit = false;
    },
}

不需要用ui组件的直接把数据showEdit放到下面button中去

Answer 2

提示的很明显了，showDate和showPicker被引用了，但是你没有定义，去定义一下就好了。你没有贴出来引用这块的代码，不好判断

Answer 3

请贴详细代码