• 对于vue的一些理解


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

    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。
  • 相关阅读:
    bzoj 1853: [Scoi2010]幸运数字 容斥
    bzoj 3545&&3551: [ONTAK2010]Peaks &&加强版 平衡树&&并查集合并树&&主席树
    bzoj 2331: [SCOI2011]地板 插头DP
    bzoj 3669: [Noi2014]魔法森林 动态树
    bzoj 2734: [HNOI2012]集合选数 状压DP
    bzoj 3751: [NOIP2014]解方程 同余系枚举
    bzoj 2594: [Wc2006]水管局长数据加强版 动态树
    bzoj 2049: [Sdoi2008]Cave 洞穴勘测 动态树
    bzoj 2209: [Jsoi2011]括号序列 splay
    bzoj 1223: [HNOI2002]Kathy函数 数位DP 高精度
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/9430050.html
Copyright © 2020-2023  润新知