| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> 组件通信实现vue+localStorage制作todolist -> 正文阅读 |
|
|
[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博客 |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 | -2024/5/13 19:54:30- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |