vue的components：父子组件的相互通讯、非父子组件的eventBus通讯、利用本地缓存实现组件通讯、Vuex通讯

 

      做为一个vue初学者不得不了解的就是组件间的数据通讯。通讯方式根据组件之间的关系有不一样之处。组件关系有下面三种：父-->子、子-->父、非父子 基本上是这三种的模式。那么接下来我们具体的根据这三种状况具体的介绍经常使用的①父子组件的相互通讯②非父子组件的通讯③利用本地缓存实现组件通讯④vuex通讯：

    一，父子组件的相互通讯（直接贴代码更加获得快速高效）

   1.父组件向子组件传递数据：

      ①经过props  ：   

     建立一个prompt的子组件，用props定义接受的数据

   父组件中引用子组件prompt并给子组件传值

在html中引用组件promptShow是属性名必须跟子组件的同样，

 在js中引用子组件而且动态更改数据，

 ②经过refs进行组件数据传递

建立子组件

 在父组件中调用子组件

html中的应用

在js中的应用，调用callMethods()方法并传入参数：

 

 ③经过v-bind进行数据通讯

建立子组件

在父组件中应用

html中：

在js中的应用：

④$parent和$children,$root(可是这个慎用),$refs

       $parent用来引用父组件，$children返回一个子组件的数组.能够在自组件中使用this.$parent.属性值，或者函数;this.$children[i].属性,访问子组件这几个提供了对vue组件的直接访问，可是不推荐这么用，会提升组件之间的耦合。好比你给$root的data一个空的vue组件XXX，能够在两个组件之间经过this.$root.XXX.$emit来触发，this.$root.XXX.$on来监听，实现组件之间的通讯。$children返回的组件顺序不固定，能够像访问数组同样经过下标去访问，$refs须要提早给子组件起一个名字。能够经过$parent访问父组件的方法或数据。

2.子组件向父组件传值

$emit和$on进行数据传值

建立子组件：

在父组件中：

html中：

在js中：

 

    二，非父子组件的通讯:eventBus

 

eventBus这种通讯方式,针对的是非父子组件之间的通讯,它的原理仍是经过事件的触发和监听。

 

可是由于是非父子组件的关系,他们须要有一个中间组件来链接。

 

我是使用的经过在根组件,也就是#app组件上定义了一个全部组件均可以访问到的组件,具体使用方式以下

 

使用eventBus传递数据,咱们一共须要作3件事情

 

• 1.给app组件添加Bus属性 (这样全部组件均可以经过this.$root.Bus访问到它,并且不须要引入任何文件)

• 2.在组件1里,this.$root.Bus.$emit触发事件

• 3.在组件2里,this.$root.Bus.$on监听事件

 

    三，利用本地缓存实现组件通讯：利用localStorage或者sessionStorage

             这种通讯比较简单,缺点是数据和状态比较混乱,不太容易维护。

            经过window.localStorage.getItem(key) 获取数据
            经过window.localStorage.setItem(key,value) 存储数据

            注意用JSON.parse() / JSON.stringify() 作数据格式转换。

    四，vuex通讯

      Vuex比较复杂,暂时不作说明，后期有机会再写一篇