Javascript
组件通信实现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博客
-
【JS逆向百例】爱疯官网登录逆向分析12-23
-
Vue3教程：新手入门到实践应用12-21
-
VueRouter4教程：从入门到实践12-21
-
Vue3项目实战：从入门到上手12-20
-
Vue3项目实战：新手入门教程12-20
-
VueRouter4项目实战：新手入门教程12-20
-
如何实现JDBC和jsp的关系？-icode9专业技术文章分享12-20
-
Vue项目中实现TagsView标签栏导航的简单教程12-20
-
Vue3入门教程：从零开始搭建你的第一个Vue3项目12-20
-
从零开始学习vueRouter4：基础教程12-20
-
Vuex4课程：新手入门到上手实战全攻略12-20
-
Vue3资料：新手入门及初级教程12-20
-
Vuex4入门指南：轻松掌握Vue状态管理12-20
-
Vue3学习：从入门到实践的简单教程12-20
-
Vue学习：从入门到简单项目实战12-20
