PC端系統(tǒng)開發(fā)常見的操作無非就：增、刪戈抄、查、改
很多時候有這么個場景：對某個列表進行 添加和編輯的操作
列表
這個時候添加操作和編輯操作的界面基本是一致的啦桌，我們在利用Vue進行開發(fā)的時候匾旭，可以同用一個組件镣屹，這樣代碼結(jié)構(gòu)也顯得簡潔
示例代碼如下：
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() {
//打開編輯界面時候傳遞過去的初始數(shù)據(jù)
let row={ id:1,name:'YK',age:'18'}
this.editData=row
this.flag=true
},
//關(guān)閉對話框組件
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?'編輯數(shù)據(jù)':'添加數(shù)據(jù)'}}</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 {
//如果需要過濾數(shù)據(jù)，應(yīng)該在定義在計算屬性里面
MyData:this.editData
};
},
methods:{
save(){
this.$emit('close_add_edit', false)
}
}
};
</script>
