19.11.27数据传递

1.非父子之间的通信,是普通组件之间的通信。需要借助一个新的实例化vue对象bus.js

   bus.js中的代码

bus中的代码

在事件监听中,会出现第一次监听不到数据的情况,即bus.$on获取不到数据,这时,需要在bus.$emit外添加一个$nextTick()来解决。

示例:

bus.$emit触发


bus.$on监听

特别注意:

在bus中的this指向问题。因为bus中的this指向bus实例对象,所以在bus中想要给data中设置值的时候,需要保存一个vue的this为that,进而设置data中的值。

2.路由组件之间的通信用params,query,localStorage进行传数据。

示例:

编程式导航传参
接收参数

注意:编程式导航的参数传递:params只能和name进行搭配,path和query进行搭配,或者只有单一个path。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,292评论 1 22
  • _________________________________________________________...
    fastwe阅读 1,412评论 0 0
  • Vue简介 2014年诞生,2013年react,09年angularjs 作者: 尤雨溪 核心概念: 组件化 双...
    简单就好wfc阅读 1,671评论 0 1
  • 原文:https://www.jianshu.com/p/0cdf51904afb 计算属性如何使用 一般我们在写...
    L_b115阅读 820评论 0 0
  • 计算属性如何使用 一般我们在写vue的时候,在模板内写的表达式非常便利,它运用于简单的运算,但是他也有一些复杂的逻...
    X秀秀阅读 13,776评论 1 19