PC端共用同一个组件进行添加与编辑的demo（基于VUE）

PC端系统开发常见的操作无非就：增、删、查、改
很多时候有这么个场景：对某个列表进行 添加和编辑的操作

这个时候添加操作和编辑操作的界面基本是一致的，我们在利用Vue进行开发的时候，可以同用一个组件，这样代码结构也显得简洁

示例代码如下：
list.vue

<template>
  <div>
    <button @click="add">添加</button>
    <button @click="edit">编辑</button>
    <div v-if="flag">
      <add_edit :editData="editData" @close_add_edit="close_add_edit"></add_edit>
    </div>
  </div>
</template>
<script>
  import add_edit from './add_edit'
  export default {
    components: {
      add_edit
    },
    data() {
      return {
        flag: false,
        editData:{}
      }
    },
    methods: {
      //打开对话框组件-目的：添加
      add() {
        this.flag=true
      },
      //打开对话框组件-目的：编辑
      edit() {
        //打开编辑界面时候传递过去的初始数据
        let row={ id:1,name:'YK',age:'18'}
        this.editData=row
        this.flag=true
      },
      //关闭对话框组件
      close_add_edit(boolean_Value){
        this.editData={}
        this.flag=boolean_Value
      }
    }
  };
</script>

add_edit.vue

<template>
    <div  style="border:1px solid #cccccc">
          <p>{{editData.id?'编辑数据':'添加数据'}}</p>
          <p> name : <input type="text" v-model="MyData.name"></p>
          <p> age : <input type="text" v-model="MyData.age"></p>
          <p><button @click="save">保存</button></p>
    </div>
</template>
<script>
    export default {
      props: ['editData'],
        data() {
            return {
              //如果需要过滤数据，应该在定义在计算属性里面
              MyData:this.editData
            };
        },
      methods:{
        save(){
          this.$emit('close_add_edit', false)
        }
      }
    };
</script>