首先是组件之间的通信方式

  1. 父组件到子组件的通信:

    props和$refs
  2. 子组件到父组件的通信:

    events 和 $parents 以及 $root
  3. 组件之间的通信

    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的一些理解的更多相关文章

  1. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  2. vue props的理解

    vue用了这么久,今天发现父子组件还是傻傻的分不清,不过还好,今天终于搞懂了 vue中到底什么是父组件,什么是子组件 vue之props父子组件之间的谈话 简单的理解就是:使用的地方是父组件,定义的地 ...

  3. vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制

    一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  4. 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制

    一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  5. Vue的渐进式理解(笔记)

    在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 比如说,Angu ...

  6. Vue slot-scope的理解(适合初学者)

    百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOC ...

  7. vue之mixin理解与使用

    使用场景 当有两个非常相似的组件,除了一些个别的异步请求外其余的配置都一样,甚至父组件传的值也是一样的,但他们之间又存在着足够的差异性,这时候就不得不拆分成两个组件,如果拆分成两个组件,你就不得不冒着 ...

  8. Vue插槽slot理解与初体验 ~

    一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...

  9. Vue之彻底理解自定义组件的v-model

    最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...

  10. vue的渐进式理解

    链接:https://www.zhihu.com/question/51907207/answer/136559185 渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

随机推荐

  1. SpringBoot自动化配置之四:SpringBoot 之Starter(自动配置)、Command-line runners

    Spring Boot Starter是在SpringBoot组件中被提出来的一种概念,stackoverflow上面已经有人概括了这个starter是什么东西,想看完整的回答戳这里 Starter ...

  2. HTTP:HTTP清单

    ylbtech-HTTP:HTTP清单 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbt ...

  3. 第五章 Java中锁

    Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源(但是有些锁可以允许多个线程并发的访问共享资源,比如读写锁).在Lock接口出现之前,Java程序 ...

  4. 如何在Eclipse下查看JDK源代码以及java源代码阅读方法(转载)

    不会看JDK源代码,相当于没学过Java. 网上不容易找到一篇帮助我解决了如何在Eclipse下查看JDK源代码 的文章. 核心提示:在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 w ...

  5. Anaconda 安装教程(Win10环境) Tensorflow安装

    序 Python易用,但用好却不易,其中比较头疼的就是包管理和Python不同版本的问题,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython.An ...

  6. Android ScrollView 内部控件 layout_margin失效的解决方法

    在<ScrollView> 的<LinearLayout  >属性里面加入android:layout_gravity="top" <LinearLa ...

  7. oracle创建完实例删除的时候报ORA-01031:insufficient privileges错误,解决办法

    创建了一个数据库,想删除确报了一个ORA-01031:insufficient privileges错误 查了好久,总算解决了,原因是我的电脑登录账户不在ORA_DBA系统群组中,添加进去完美删除! ...

  8. Codeforces 1142B Lynyrd Skynyrd

    ---恢复内容开始--- 题意:给你一个排列p和数组a,有t组询问,每次询问一个区间的子序列中是否有p的一个循环排列. 思路:以p = [3, 1, 2]举例, 我们扫描数组b,假设当前数字是1,那么 ...

  9. C++对ASCII文件的操作例子

    从键盘读入一行字符,把其中的字母字符依次放在磁盘文件f2.dat中,再把它从磁盘文件读入程序,将其中的小写字母改写成大写字母,再存入磁盘文件f3.dat. code: #include<iost ...

  10. 【转】手把手教你用Strace诊断问题

    原博客地址:http://huoding.com/2015/10/16/474 早些年,如果你知道有个 strace 命令,就很牛了,而现在大家基本都知道 strace 了,如果你遇到性能问题求助别人 ...