对于vue的一些理解
首先是组件之间的通信方式
- 父组件到子组件的通信:
props和$refs - 子组件到父组件的通信:
events 和 $parents 以及 $root - 组件之间的通信
eventBus和vuex
eventBus的使用:
引入vue的eventBus:import Vue from 'vue';
export default new Vue();
之后,
首先挂载事件:bus.$on('onChange', (params) => this.open(params))
;
然后再调用:bus.$emit('onChange', params)
不使用的时候要在声明周期钩子的destroyed中销毁,因为eventBus不能自动销毁。bus.$off('onChange')
在使用event-bus的时候需要结合生命周期钩子并用在合适的生命周期内。
例如: 如果要在A页面之中使用eventBus通过事件名‘onChange’将参数params传递到B页面
(1). 首先应该在AB页面中分别引入新的Vue对象,作为eventBus的载体,这时候可以建立一个公共文件,作为eventBus的载体
event-bus.js:
import Vue from 'vue'; export default new Vue();
在A.vue和B.vue文件中引入
import EventBus from 'event-bus.js'
(2). 在B页面中,挂载上EventBus事件,挂载事件发生在mounted的时候。
EventBus.$on('onChange', params)
(3). 在A页面中 ,emit事件
EventBus.$emit('onChange', {a:1})
这样就可以把A页面中的参数a的值1传递到B页面中使用了。
(4). 最后在B页面的destory()生命周期中销毁。
EventBus.$off('onChange')
(5). 但是有一点需要注意, 需要注意A,B页面中生命周期的顺序,需要优先加载A页面,先将事件挂载上,否则参数根本传不过来,再一点,如果不销毁EventBus事件,会累计调用这个事件,随着点击次数增加。
v-if和v-show的区别已经适宜的使用场景
v-if是真正的条件渲染,条件切换的时候,子组件等也会随着销毁和重建,并且v-if的渲染是惰性的,知道条件为真时,组件才会被渲染。
v-show是组件页面渲染的时候就被渲染了,不管条件是否为真,条件只是用来单纯的切换css的变化控制显示隐藏。
v-if切换的时候开销大,v-show初始渲染时候开销比较大,所以,频繁切换的时候使用v-show, 如果判断条件比较少,就使用v-if。
对于vue的一些理解的更多相关文章
- 沉淀,再出发:VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- vue props的理解
vue用了这么久,今天发现父子组件还是傻傻的分不清,不过还好,今天终于搞懂了 vue中到底什么是父组件,什么是子组件 vue之props父子组件之间的谈话 简单的理解就是:使用的地方是父组件,定义的地 ...
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- Vue的渐进式理解(笔记)
在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 比如说,Angu ...
- Vue slot-scope的理解(适合初学者)
百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOC ...
- vue之mixin理解与使用
使用场景 当有两个非常相似的组件,除了一些个别的异步请求外其余的配置都一样,甚至父组件传的值也是一样的,但他们之间又存在着足够的差异性,这时候就不得不拆分成两个组件,如果拆分成两个组件,你就不得不冒着 ...
- Vue插槽slot理解与初体验 ~
一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...
- Vue之彻底理解自定义组件的v-model
最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...
- vue的渐进式理解
链接:https://www.zhihu.com/question/51907207/answer/136559185 渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
随机推荐
- 四 Mixer
Mixer在应用程序和基础架构后端之间提供通过中介层.它的设计将策略决策移出应用层,用运维人员能够控制的配置取而代之. Mixer的设计目的是改变层次之间的边界,以此降低总体复杂性.从服务代码中剔除策 ...
- 环境搭建:Vue环境搭建和项目初始化(windows)
1. 安装node.js 官网下载安装:https://nodejs.org/en/ 版本查看:node -v 注意:node版本最好新一点好,推荐6.0以上. 2. npm安装webpa ...
- c#的日志插件NLog基本使用
本文介绍c#的日志插件NLog 安装插件 创建logger 日志级别 书写日志信息 配置 包装器 布局 安装插件 直接下载插件包 Install-Package NLog.Config 创建logge ...
- 【SymmetricDS】SymmetricDS是如何工作的
2018-04-20 by 安静的下雪天 http://www.cnblogs.com/quiet-snowy-day/p/8890785.html 本文翻译自SymmetricDS官方文档 ...
- ASP.NET 页面生命中的关键事件的执行顺序
表 1:ASP.NET 页面生命中的关键事件 阶段 页面事件 可覆盖的方法 页面初始化 Init 加载视图状态 LoadViewState 处理回发数据 任意实现 IPostBackDat ...
- css之content
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容.该属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 dis ...
- Linux服务器在外地,如何用eclipse连接hdfs
配置外网和内网的映射,内部所有配置全部用内网的IP 本地所有配置皆为外网地址 本地给服务器发指令全部由映射转换为内网指定IP,即可
- ROS Learning-013 beginner_Tutorials (编程) 编写ROS服务版的Hello World程序(Python版)
ROS Indigo beginner_Tutorials-12 编写ROS服务版的Hello World程序(Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的 ...
- java过滤器 Fliter
定义:过滤器是一个服务器端组件,他可以截取用户端请求信息与响应信息,并对信息进行过滤 例:当进入csdn要进行文章编辑时,检测用户是否登录,若未登录,跳转到登录界面. 过滤器操作方法: init() ...
- loj10093 网络协议
传送门 分析 第一问我们不难想出是缩点之后的新图中入度为0的点的个数,对于第二问,我们画一画可以发现最优策略就是对于每一个入度为0的点都有一个出度为0的点连向它,而对于每一个出度为0的点也一定连向一个 ...