其他分享
首页 > 其他分享> > 组件通信实现vue+localStorage制作todolist

组件通信实现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