几种常见的Vue组件间的传参方式？

Vue父子组件通讯的方法其实有很多，本文只是做一个总结，说说他们的优缺点。

1.Vuex

- 介绍

  1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
  2. 它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，
提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

- 应用

1. 当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。 

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。
以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？
在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，
任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，
我们的代码将会变得更结构化且易维护。

- 优缺点

 1. 优点
 解决了多层组件之间繁琐的事件传播。
 解决了多组件依赖统同一状态的问题。
 单向数据流
 为Vue量身定做，学习成本不高
 
 2.缺点
 不能做数据持久化，刷新页面就要重制，要做数据持久化可以考虑使用localstorage。
 增加额外的代码体积，简单的业务场景不建议使用。

2.EventBus

- 介绍

 1. 通过共享一个vue实例，使用该实例的$on以及$emit实现数据传递。

-使用方法

-优缺点

1. 优点
解决了多层组件之间繁琐的事件传播。
使用原理十分简单，代码量少。

2.缺点
由于是都使用一个Vue实例，所以容易出现重复触发的情景，例如：
多人开发时，A、B两个人定义了同一个事件名。
两个页面都定义了同一个事件名，并且没有用$off销毁（常出现在路由切换时）。
在for出来的组件里注册。

3.props和 $emit $on

-介绍

 1. 最基本的父组件给子组件传递数据方式，
 将我们自定义的属性传给子组件,子组件通过$emit方法，
 触发父组件v-on的事件，从而实现子组件触发父组件方法。

-使用方法

1. Prop 是你可以在组件上注册的一些自定义特性。
当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。 

详情请参考：Props官方传送门

2.  $emit  与  $on
var Event = new Vue();　　　　　
相当于又new了一个vue实例，Event中含有vue的全部方法；
Event. $emit('msg',this.msg);　　　
发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置
Event.$on('msg',function(msg){　　
　/这里是对数据的操作
　})
　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作。
3.Tips
$attrs/$listeners可以将父组件的props和事件监听器继承给子元素，
在子组件可以调用到父组件的事件和props

详情请参考：$attrs $listeners官方传送门
-优缺点

1. 优点
使用最为简单，也是父子组件传递最常见的方法。
Vue为给props提供了类型检查支持。
$emit不会修改到别的组件的同名事件，因为他只能触发父级的事件，这里和event-bus不同

2.缺点
单一组件层级一深需要逐层传递，会有很多不必要的代码量。
不能解决了多组件依赖统同一状态的问题。

4.provide/inject

-介绍

1. 在父组件上通过provide提供给后代组件的数据/方法，
2. 在后代组件上通过inject来接收被注入的数据/方法。

-使用方法
详情请参考：provide/inject官方传送门

-优缺点

1. 优点
不用像props一层层传递，可以跨层级传递。

2.缺点
用这种方式传递的属性是非响应式的，所以尽可能来传递一些静态属性。
引用官网的话是它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。
用了provide/inject你就要遵循它的组件组织方式，
在项目的重构时如果要破坏这个组织方式会有额外的开发成本，其实event-bus也有这个问题。

5.slot

-介绍

1. 你可以在组件的html模版里添加自定义内容，这个内容可以是任何代码模版
2. 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
3. 你也可以通过slot-scope属性来实现从子组件将一些信息传递给父组件。

-使用方法
详情请参考：slot官方传送门

-优缺点

1. 优点
可以在父组件里自定义插入到子组件里的内容，虽然其他属性也可以，
但是我觉得slot更倾向于自定义的条件是来自于父容器中。
复用性好,适合做组件开发。

2.缺点
和props一样不支持跨层级传递。

6.$parent $children

-介绍

1. 通过$parent   $children可以拿到父子组件的实例，
从而调用实例里的方法，实现父子组件通信。并不推荐这种做法。

-使用方法

1. 通过this.$parent或者this.$children拿到父或子组件实例。

详情请参考：$parent $children官方传送门

-优缺点

1. 优点
可以拿到父子组件实例，从而拥有实例里的所有属性。

2.缺点
用这种方法写出来的组件十分难维护，因为你并不知道数据的来源是哪里，有悖于单向数据流的原则
this.$children拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤其是子组件多的时候。

7.sessionStorage

-介绍

1. sessionStorage是HTML5新增的一个会话存储对象，
用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后会将删除这些数据
2.在Javascript语言中可通过window.sessionStorage或sessionStorage调用此对象。

-特点

1. 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、
同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
单标签页限制。sessionStorage操作限制在单个标签页中，
在此标签页进行同源页面访问都可以共享sessionStorage数据。

2.只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，
只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，
seesionStorage的数据也会恢复)。

3.存储方式。seesionStorage的存储方式采用key、value的方式。
value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
4.存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。