zoukankan      html  css  js  c++  java
  • 对于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。
  • 相关阅读:
    .NET Interop 工具集
    关于正弦波的算法
    Windows Phone 系列 本地数据存储
    Xaml cannot create an instance of “X”
    Windows Phone 系列 使用 MVVM绑定时无法获取当前值
    Windows Phone 系列 应用程序图标无法显示
    Windows Phone 系列 WPConnect无法上网的问题
    Windows Phone 系列 使用 Windows Phone 保存铃声任务
    WP7.5提交应用
    Windows Phone 系列 动态删除ObservableCollection
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/9430050.html
Copyright © 2011-2022 走看看