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>
