组件通信实现vue+localStorage制作todolist

2021/10/25 23:12:54

编程Tag： vue 组件数据 data localStorage todoList item list donelist

本文主要是介绍组件通信实现vue+localStorage制作todolist，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天找到一篇使用组件通信的方法制作的todolist，换了一种思路，有练习了组件通信，先把第一步记录下来

<!DOCTYPE html>

<html>

<head>

<meta

name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

<title>ToDoList</title>

</head>

<body>

</div>

//提取数据

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>

<ul>

<u>{{index+1}}</u>

</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>

<ul>

<u>{{index+1}}</u>

</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+localStorage制作todolist的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

组件通信实现vue+localStorage制作todolist

相关编程文章