组件通信实现vue+localStorage制作todolist
作者：互联网
今天找到一篇使用组件通信的方法制作的todolist，换了一种思路，有练习了组件通信，先把第一步记录下来
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>ToDoList</title>
</head>
<body>
<div id="app">
<add></add>
<doing></doing>
<done></done>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
//提取数据
function getData() {
let data = localStorage.getItem("data");
if (data == null) {
return [];
} else {
return JSON.parse(data);
}
}
//存入数据
function saveData(data) {
localStorage.setItem("data", JSON.stringify(data));
}
//定义一个同级传递的vue实例当作桥梁
const passPath = new Vue();
//添加组件add
Vue.component("add", {
data: function() {
return {
val: "" //接受添加的数据
};
},
template: `<div><input type="text" v-model="val"/><button @click="add">添加</button></div>`,
methods: {
add() {
//将添加的数据存入变量data中
let data = {
val: this.val,
checked: false
};
//获取本地数据
let localData = getData();
//将新增加的数据添加到本地数据中
localData.push(data);
//将新结果上传到本地数据
saveData(localData);
//想未完成组件传入新数据
passPath.$emit("val", localData);
}
}
});
//未完成组件doing
Vue.component("doing", {
data: function() {
return {
list: [] //未完成列表
};
},
template: `
<div>
<h2>未完成</h2>
<ul>
<li v-for="(item,index) of list" :key="index" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="change(item.checked)"/>
<u>{{index+1}}</u>
<span>{{item.val}}</span>
<button @click="del(index)">删除</button>
</li>
</ul>
</div>
`,
methods: {
del(index) {
//删除传入的索引的数值
this.list.splice(index, 1);
//提交数据
saveData(this.list);
},
change() {
//提交修改后的数据
saveData(this.list);
//传递给已完成修改后的数据
passPath.$emit("done", this.list);
}
},
mounted() {
//实时接收add传入的数据
passPath.$on("val", item => {
this.list = item;
});
//显示现有的数据
this.list = getData();
//接受修改的已完成中的数据
passPath.$on("done", item => {
this.list = item;
});
}
});
//已完成组件done
Vue.component("done", {
data: function() {
return {
donelist: []
};
},
template: `<div>
<h2>已完成</h2>
<ul>
<li v-for="(item,index) of donelist" :key="index" v-if="item.checked">
<input type="checkbox" v-model="item.checked" @change="change" />
<u>{{index+1}}</u>
<span>{{item.val}}</span>
<button @click="del(index)">删除</button>
</li>
</ul>
</div>`,
methods: {
del(index) {
this.donelist.splice(index, 1);
saveData(this.donelist);
},
change() {
saveData(this.donelist);
//将修改后的数据传递给未完成组件
passPath.$emit("done", this.donelist);
}
},
mounted() {
//接受已完成组件传来的数据
passPath.$on("done", item => {
this.donelist = item;
});
this.donelist = getData();
}
});
//vue实例
var vm = new Vue({ el: "#app" });
</script>
</body>
</html>
源码来源：
使用vue框架写一个TodoList案例，可实现localStorage数据存储_weixin_44252542的博客-CSDN博客
标签：vue,todolist,数据,list,donelist,item,localStorage,组件,data 来源： https://blog.csdn.net/sinat_41843998/article/details/120962461