components下創建組件:
父組件index.vue (引入子組件 注冊調用 app.vue 引入注冊調用index.vue)
子組件：form.vue和list.vue
index.vue 代碼如下：
<template>
<div>
<!-- 7.點擊出現 -->
<button @click="addbtn">添加</button>
<!-- 2.數據列表組件 -->
<!-- 11.傳遞arr給list -->
<!-- 21.綁定show事件 -->
<!-- 30.綁定del -->
<v-list :arr="arr" @show="edit" @del="del($event)"></v-list>
<!-- 3.表單組件 -->
<!-- 6.條件渲染 -->
<!-- 9.綁定自定義事件hide -->
<!-- 16.綁定自定義事件add -->
<!-- 19.綁定ref -->
<!-- 25.info傳給form,form根據isAdd來確定是“添加”還是"修改" -->
<!-- 26.綁定update -->
<v-form
v-show="info.isshow"
@hide="info.isshow=false"
@add="add"
ref="form"
:info="info"
@update="update"
></v-form>
</div>
</template>
<script>
// 4.list.vue form.vue 實現靜態頁面
import vList from "./list";
import vForm from "./form";
export default {
components: {
vList,
vForm,
},
data() {
return {
// 5.初始化變量
// 22.由於添加和修改都開彈框，所以加isAdd字段表示是添加還是修改
info: {
isshow: false,
//判斷是添加的彈框還是修改的彈框，如果是添加開的彈框，isAdd=true,修改開的彈框，isAdd=false
isAdd: true,
},
// 添加
//10.初始化數據
arr: [
{ id: 1, title: "22", con: "qq" },
{ id: 2, title: "33", con: "qq" },
],
};
},
methods: {
// 17.添加
add(user) {
this.arr.push({
id: new Date().getTime(),
...user,
// title:user.title,
// con:user.con
});
//彈框消失
this.info.isshow = false;
//20.form的user要清空
this.$refs.form.empty();
},
//23.添加按鈕
addbtn() {
this.info = {
isshow: true,
isAdd: true,
};
},
//24.編輯
edit(index) {
//彈框出現
this.info = {
isshow: true,
isAdd: false,
};
//多傳了1個id,但是一會兒修改的時候需要id來判斷修改哪條，所以需要
this.$refs.form.user = { ...this.arr[index] };
},
//27.更新
update(user) {
// 查出arr中哪條數據的id和user的id是一樣的，要這條數據的下標
// findIndex返回滿足條件的數據的下標，不存在，返回-1
// find返回滿足條件的那條數據，不存子啊，返回undefined
let index = this.arr.findIndex((item) => item.id == user.id);
//修改
this.arr.splice(index, 1, { ...user });
//彈框消失
this.info.isshow = false;
//form的user要清空
this.$refs.form.empty();
},
// 32.刪除
del(id){
let index=this.arr.findIndex(item=>item.id==id)
this.arr.splice(index,1)
}
},
};
</script>
<style>
</style>
form.vue代碼如下：
<template>
<div class="mask" @click.self="cancel">
<div class="con">
<h3>{{info.isAdd?'添加':'修改'}}</h3>
{{user}}
<div>
標題：
<input type="text" v-model="user.title" />
</div>
<div>
內容：
<input type="text" v-model="user.con" />
</div>
<div>
<button @click="add" v-if="info.isAdd">添加</button>
<button v-else @click="update">修改</button>
<button @click="cancel">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["info"],
data() {
return {
// 14.初始化input的值
user: {
title: "",
con: "",
},
};
},
methods: {
// 8.取消彈框
cancel() {
//28.添加的取消，不動user
// 修改的取消，user要清空
if(!this.info.isAdd){
this.empty()
}
this.$emit("hide");
},
//15.添加邏輯
add() {
//通知父組件添加
this.$emit("add", this.user);
},
// 18.清空數據
empty() {
this.user = {
title: "",
con: "",
};
},
//25.修改
update() {
//通知父組件做修改
this.$emit("update", this.user);
},
},
};
</script>
<style scoped>
.mask {
width: 100vw;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.con {
background: #fff;
width: 280px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
list.vue代碼如下：
<template>
<div>
<!-- 繪制靜態頁面 -->
<table border="1" width="800">
<tr>
<th>序號</th>
<th>標題</th>
<th>內容</th>
<th>操作</th>
</tr>
<!-- 13.遍歷arr -->
<tr v-for="(item,index) in arr" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.title}}</td>
<td>{{item.con}}</td>
<td>
<button @click="edit(index)">修改</button>
<button @click="del(item.id)">刪除</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
// 12.收arr
props: ["arr"],
methods:{
//21.修改
edit(index){
this.$emit("show",index)
},
//29.刪除
del(id){
this.$emit("del",id)
}
}
};
</script>
<style>
</style>
app.vue代碼如下：
<template>
<div>
<!-- 1.作業 創建index組件，然后引入 注冊 調用 -->
<!-- <v-index></v-index> -->
<!-- 2.緩存組件 -->
<v-keep></v-keep>
</div>
</template>
<script>
import vIndex from "./components/index"
import vKeep from "./keep/index"
export default {
components:{
vIndex,
vKeep
}
}
</script>
<style>
</style>
實現效果：
