vue[父子之间、兄弟组件之间数据传递]

在vue的组件化系统中，我们最常遇到的一个问题就是组件之间的各种数据传递关系问题。因此解决数据传递的问题就是非常关键的问题。

父子组件数据传递方式

第一种方式：通过props和$emit配置的非绑定式数据传递

这个数据传递方式的本质：
父组件利用props属性向下传递数据，子组件利用事件系统$ emit向上传递数据。
这个数据传递方式的核心操作：
**1.**父组件中引入子组件，并且给子组件绑定传递过去的变量以及值，如：本例中的:message=“msg”，这里必须要使用v-bind(:)的形式绑定自定义变量(如:message可以为其他名称)。然后传递的值msg是父组件中要传递的内容。
**2.**子组件通过props接受传递过来的message值。注意：props可以是对象也可以是数组，通常情况下应该为对象，哪怕为空对象也行。如本例中：
props:{
message:{} // 这里传递的名称必须和父组件那边传递的变量名称一样
}
其中message对象可以有各种定义内容
参考：官方Prop
**3.**子组件中可以直接通过this.message来获取数据，但不能改变传递值。如果需要改变传递的数据可以在data中定义变量，然后将内容赋值给data中的变量来操作
**4.**主动触发 $ emit向外传递一个事件并且带入传递值。
注：$ emit有两个入参第一个为触发的事件名称(可自定义)，第二个为传递的参数值。
**5.**父组件通过在子组件上实现 @sendParent(来自于emit)=“方法” 的形式触发本组件中的某个方法，其中方法的参数即为传递值。
由此完成父子组件数据交互，这种方式适用于可复用的组件，通常只需要知道需要传入的porp变量名称以及emit出去的方法名称即可做到多次使用。
这是一个非常通用且是官方推荐的父子数据传递方式。示例如下：
父组件内容如下：

子组件内容如下：

第二种方式：通过ref和$parent获取组件实例来进行绑定式数据传递

这个数据传递方式的本质：
1.给导入的子组件通过ref 命名操作，然后使用$ refs[‘xxx’]即可获取到子组件的实例对象，即可以获取子组件的属性和方法，亦可改变其数据
2.子组件可以直接通过 this.$ parent 的方式直接获取到父组件的实例对象，即可以获取父组件的属性和方法，亦可改变其数据
注意：
1.这种方式会导致组件之间进行完全绑定。即该子组件就只能在这个父组件中使用，无法复用。
2.有些情况下会出现$ parent获取不到需要的父组件实例情况，如el-dialog嵌套之类的，原因在于多了好几个隐藏的嵌套对象，因此可能需要通过this.$ parent.$ parent之类的多次向上寻找才能找到。
示例内容
父组件内容：

子组件内容：

兄弟组件之间、跨多层次组件之间的传递数据

第一种方式：使用Vuex传递数据

参考：vuex[一文整理vuex的常规使用]

第二种方式：使用中央事件总线(事件车eventBus)来传递数据

参考：vue[(事件车eventBus)中央事件总线数据传递]

第三种方式：使用sessionStorage/localStorage传递数据