本地存储、自定义事件、全局事件总线

Vue
1.1 浏览器的本地存储
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
浏览器通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制
相关API:
(1)xxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
(2)xxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值
(3)xxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
(4)xxxxStorage.clear()
该方法清空存储中的所有数据。
备注:
(1)sessionStorage存储的内容会随着浏览器窗口关闭而消失。
(2)LocalStorage存储的内容,需要手动清除才会消失。
(3)xxxxStorage.getItem(xxx) 如果xxx对应的value获取不到,那么getItem的返回值是null
(4)JSON.parse(null)的结果依然是null
1.2 组件的自定义事件
一种组件间通信的方式,适用于:子组件 ===> 父组件
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
绑定自定义事件:
(1)第一种方式,在父组件中:< Demo @zmy = "test"/ > 或 <Demo v-on:zmy = "test"/ >
(2)第二种方式,在父组件中:
 

<Demo ref="demo"/>
......
mounted(){this.$refs.xxx.$on('zmy', this.test)
}

(3) 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法
4. 触发自定义事件:this. $ emit('zmy', 数据)
5. 解绑自定义事件:this.$ off('zmy')
6. 组件上也可以绑定原生DOM事件,需要使用native修饰符
7. 注意:通过 this.$ refs.xxx.$ on('zmy', 回调) 绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!

1.3 全局事件总线
1.3.1 理解
一种组件间通信的方式,适用于任意组件间通信
Vue 原型对象上包含事件处理的方法
(1) $on(eventName, listener): 绑定自定义事件监听
(2) $emit(eventName, data): 分发自定义事件
(3) $off(eventName): 解绑自定义事件监听
(4) $once(eventName, listener): 绑定事件监听, 但只能处理一次
所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
(1)所有组件对象都能看到 Vue 原型对象上的属性和方法
(2) Vue.prototype.$bus = new Vue() ,所有的组件对象都能看到$bus 这个属性对象
全局事件总线
(1)包含事件处理相关方法的对象(只有一个)
(2)所有的组件都可以得到

  

1.3.2 指定事件总线对象
安装全局事件总线:

new Vue({......beforeCreate(){Vue.prototype.$bus = this//安装全局事件总线,$bus就是当前应用的vm},......
})


使用事件总线
(1)接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。

methods(){demo(data){......}
}
......
mounted(){this,$bus.$on('xxx', this.demo)
}


(2)提供数据:this.$ bus.$ emit('xxx', 数据)

最好在 deforeDestroy 钩子中,用 $ off 去解绑当前组件所用到的事件
School.vue

<template><div class="school"><h2>学校名称:{{ name }}</h2><h2>学校地址:{{ address }}</h2></div></template><script>export default {name: 'School',props: ['getSchoolName'],data(){return {name: '西安文理',address: '西安',}},mounted(){// console.log('School', this);this.$bus.$on('hello',(data) => {console.log('我是School组件, 收到了数据', data);})},beforeDestroy(){this.$bus.$off('hello')}}</script><style scoped>.school {background-color: skyblue;padding: 5px;}</style>



Student.vue

<template><div class="student"><h2>学生名称:{{ name }}</h2><h2>学生性别:{{ sex }}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>export default {name: 'Student',data(){return {name: '张三',sex: '男',}},methods: {sendStudentName(){this.$bus.$emit('hello', this.name)}}}
</script>
<style lang="less" scoped>.student {background-color: orange;padding: 5px;margin-top: 30px;}
</style>

App.vue<template><div class="app"><h1>{{ msg }}</h1><School/><Student/></div></template><script>import Student from './components/Student.vue'import School from './components/School.vue'export default {name: 'App',components: {School, Student},data(){return {msg: '你好啊',studentName:''}},}</script><style scoped>.app{background-color: gray;padding: 5px;}</style>



main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

/* const demo = Vue.extend({})
const d = new demo()           */                            


//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线
    }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/825072.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中类装载的执行过程

类装载的执行过程 类从加载到虚拟机中开始&#xff0c;直到卸载为止&#xff0c;它的整个生命周期包括了&#xff1a;加载、验证、准备、解析、初始化、使用和卸载这7个阶段。其中&#xff0c;验证、准备和解析这三个部分统称为连接&#xff08;linking&#xff09;。 1.加载 …

第一天学C++(C++入门)

一、HelloWorld &#xff08;第一个C入门程序&#xff09; 1.1代码 #include<iostream> using namespace std; // 1.单行注释// 2. 多行注释 /* main 是一个程序的入口 每个程序都必须有这么一个函数 有且仅有一个 */ int main() {// 第九行代码的含义就是在屏幕中输出…

果园系统养殖游戏喂养偷菜种植浇水养成小程序

装扮 通过购买装扮场景切换不同的农场风格 土地升级 通过特定的材料对土地和房屋进行升级 日志 记录道具的使用数量及金币农作物的收入情况 幸运转盘 可用金币进行抽奖 宝箱开启 获得宝箱后可以通过金币开启 每日签到 每日签到获得奖励 系统公告 可以第一时间知道游戏的更新和…

【安全】查杀linux挖矿病毒 kswapd0

中毒现象 高cpu占用&#xff0c;使用top命令查看cpu使用率长时间50%以上&#xff0c;cpu占用异常的进程八成就是挖矿病毒进程 此病毒隐藏了自己&#xff0c;top命令无法查看到挖矿病毒进程&#xff0c;可通过sysdig命令找到隐藏进程 安装sysdig curl -s https://s3.amazonaw…

2024年软件开发行业的薪资水平在下滑的原因?

下降的原因主要包括&#xff1a; 科技行业竞争加剧&#xff1a;随着科技行业竞争的加剧&#xff0c;企业为了压缩成本&#xff0c;开始降低程序员的薪资水平。 人才供应过剩&#xff1a;在计算机成为热门学科的同时&#xff0c;社会上出现了对IT业泡沫和虚假繁荣的质疑。大量…

go实现执行协成执行多个任务

大家对go语言陌生吗&#xff1f;大家有没有了解过关于go的协成呢&#xff0c;这里没有废话&#xff0c;直接上 使用go get 可以设置这个变量go env -w GOPROXYhttps://goproxy.io,direct 会使go get 更加快 package test_2import ("fmt""testing" )func w…

汉译英早操练-(十三)

hello大家好&#xff0c;这里是总想让你开心的hyssop。今天我们学点儿英语&#xff0c;填充下内心的空虚哈哈~ 不知道你拿起来一句话翻译的思路是什么&#xff0c;是应该用主动语态直抒胸臆&#xff0c;还是用被动语态强调部分&#xff1f;今天我们就来看看翻译大师李长栓老师对…

Redis数据库持久化方案

Redis数据库的持久化方案 Redis提供了两种主要的持久化方案&#xff0c;分别是RDB&#xff08;Redis DataBase&#xff09;和AOF&#xff08;Append Only File&#xff09;。 RDB&#xff08;Redis DataBase&#xff09; RDB是Redis默认的持久化方式&#xff0c;它按照一定的…

vue-textarea光标位置插入指定元素

vue-textarea光标位置插入指定元素 需求 点击插入关键字的时候把内容插入到光标所在的位置 效果图 实现 html <div class"temlate-container"><div class"template-content"><el-inputref"modelContent"v-model"mould.m…

(六)PostgreSQL的组织结构(1)-角色、数据库、schema

PostgreSQL的组织结构(1)-角色、数据库、schema 在 PostgreSQL 中&#xff0c;用户、数据库和 schema 是数据库管理和组织结构中非常基础且重要的概念。它们在定义数据库的访问权限、组织数据以及在多用户环境中管理数据方面起着核心作用。以下是每个概念的简要说明&#xff1…

全栈外包接单/远程工作(TS, React, Vue, Java, 移动端)

个人介绍 我毕业于中国某一本院校计算机专业&#xff0c;曾在北京大型软件公司从事Java开发多年&#xff0c;主要服务于全国各大头部985/211院校。后来为扩宽职业路径&#xff0c;转向了Ts全栈&#xff0c;现专注于远程外包接单工作&#xff0c;致力于打造一个能为客户带来优质…

windows命令行安装工具/包/软件后,命令行命令找不到(npm示例)

问题描述 在命令行安装工具&#xff0c;比如npm install, 或者windows自带的包管理工具&#xff0c;如Chocolatey&#xff0c;Scoop&#xff0c;WinGet等&#xff0c;安装软件后&#xff0c;然后直接在命令行运行上面安装的指令会提示命令找不到。这让经常使用linux&#xff0…

嵌入式学习56-ARM5(linux驱动启动程序)

知识零碎&#xff1a; bootm&#xff1a; 启动内核同时给内核传参 …

Ceph学习 -10.认证管理-秘钥管理

文章目录 1.秘钥管理1.1 基础知识1.2 简单实践1.3 小结 1.秘钥管理 学习目标&#xff1a;这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 1.1 基础知识 keyring 密钥环文件是“存储机密、密码、密钥、证书并使它们可用于应用程序的组件的集合”。 密钥…

hashcode与equals

如果两个对象相等,则hashcode一定也是相同的. 两个对象相等,两个对象分别调用equals方法都返回true 两个对象有相同的hashcode值,他们也不一定相等 因此,equals方法被覆盖后,则hashcode方法也必须被覆盖.

怎么给一个字典进行按值或key来排序?

字典是具有指定数字或键的特定数据集或组。在 Python 以外的编程语言中&#xff0c;它们也被称为哈希映射或关联数组。 一般来说&#xff0c;它是键值对的形式&#xff0c;就像现实世界的字典一样。 要创建字典&#xff0c;请从左括号开始&#xff0c;添加键并键入一个冒号。…

Leetcode86_分隔链表

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的…

回文链表leecode

回文链表 偶数情况奇数情况 回文链表leecode 偶数情况 public boolean isPalindrome(ListNode head) {if (head null) {return true;}ListNode fast head;ListNode slow head;while (fast ! null && fast.next ! null) {fast fast.next.next;slow slow.next;}//反…

【spring】@Resource注解学习

Resource介绍 在Spring框架中&#xff0c;Resource 注解是一个JSR-250标准注解&#xff0c;用于自动装配&#xff08;autowiring&#xff09;Spring容器中的bean。Resource 注解可以用于字段、方法和方法参数上&#xff0c;以声明依赖注入。 Resource源码 Target({TYPE, FIE…

Python相关性分析

分析连续变量之间线性相关程度的强弱&#xff0c;并用适当的统计指标表示出来的过程称为相关分析。 可以直接绘制散点图&#xff0c;或者绘制散点图矩阵&#xff0c;或者计算相关系数来进行相关分析。 相关系数的计算如下所示&#xff1a; 示例数据&#xff1a; 计算百合酱蒸…