对于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。
最新文章
- cordova 打包发布正式版 apk
- 安装完ActivePython后Python的Idle窗口打不开也卸载不掉的解决方法
- Java总结(二):继承——Inheritance
- perl脚本基础总结
- 阿里云之OSS 开放存储服务开发笔记
- ios十进制、十六进制字符串,byte,data等之间的转换
- c 占位符
- 怎样删除在Github中创建的项目
- W5500EVB TCP Client模式设置说明
- Oracle常用函数:DateDiff() 返回两个日期之间的时间间隔自定义函数
- LinQ 创建连接、简单增删改查
- python安装第三方库报错visual c++ 14.0 is required
- LogHelper 日志
- windows下输入git用户名和密码错误,重新输入用户名和密码
- BZOJ 3613: [Heoi2014]南园满地堆轻絮(二分)
- 解决 gem 添加sources的时候提示 too many connection resets的问题
- 如何在SpringBoot项目中使用拦截器
- Go Web:处理请求
- ESLint常见命令(规则表)
- Virtual DOM 和 diff 算法