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 {
100vw;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.con {
background: #fff;
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>
实现效果：
