Vue组件间通信

1. props、emit（最常用的父子通讯方式） 

父组件传入属性，子组件通过props接收，就可以在内部this.xxx的方式使用

子组件传给父组件通过$emit(时间名，传递的参数)向外弹出一个自定义事件，在父组件种监听子组件的自定义事件，同时也能获取子组件传出来的参数

vm.$on（event，fn）：监听event事件后运行fn

vm.$off（event）：移除自定义事件监听器

       2. 事件总线 EventBus（常用任意两个组件之间的通讯）

原理：注册的事件存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到Vue实例的this上即可注册和触发事件，也可拓展一些事件管理

       3. Vuex状态管理（vue的核心插件，用于任意组件的任意通讯，需要注意刷新后有可能vuex数据会丢失）

创建全局唯一的状态管理仓库store，有同步mutations，异步actions的方式去管理数据，有缓存数据getters，还能分成各个模块modules易于维护

       4. ref/$refs（父子组件之间的通信）

ref: 这个属性用在子组件上，它的作用就是指向子组件的实例，可以通过实例来访问组件的数据和方法。

       5. 依赖注入（provide/inject）

vue中依赖注入，该方法用于父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式跟data一样。

provide钩子是用来发送数据或者方法；inject钩子用来接收数据或方法

       6. $parent/$children

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）

使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺寻，并且访问的数据也不是响应式的。

通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例。

在组件中使用$children拿到的是所有的子组件的实例，他是一个数组，并且是无序的。

在根组件#app上拿$parent得到的是new Vue()的实例，在这实例上在拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组

$children的值是数组，而$parent是个对象。

      7. $attrs/$listeners

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要A给C组件传递数据，这种隔代传数据的情况该使用哪种方式呢？

如果是用props/$emit来一级一级的传递，确实可以完成，但是比较复杂，如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦，如果使用vuex，如果仅仅是传递数据，那可能有点浪费了。

针对上述情况，vue引入了$$attrs/$listeners 实现组件之间的跨代通信

$attrs:继承所有的父组件属性（除了props传递的属性、class和style），已办用在子组件的子元素上

$$listeners:该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

      8. slot插槽

父子通信 插槽主要作用是传递结构，可以直接让子组件不用书写自己的结构，在element-ui中使用的频率非常高

具名插槽：需要书写name；

作用域插槽：子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

     9. v-model 实现组件通信

v-model：指令，可以手机表单数据[text, radio, checkbox, range]等等；v-model手机checkbox需要用数组收集

v-model：实现原理 :value @input  （就是利用的props传值和$emit自定义事件触发父组件事件和向父组件传递数据来实现组件间通信） 

    10. 属性修饰符.sync 

可以实现父子数据同步。

个人理解就是v-model简写

<h2>不使用sync修改符</h2>
    <!-- 给子组件绑定一个自定义事件:update:money -->
<Child :money="money"  @update:money="handler"></Child>
<h2>使用sync修改符</h2>
<Child :money.sync="money"></Child>
//前面两者所代表的含义是一样的，都是给子组件传递了一个money数据，然后还给子组件传递了自定义事件update：money
//子组件
<span>小明每次花100元</span>
<button @click="$emit('update:money',money-100)">花钱</button>

     11. localStorage/sessionStorage

直接将数据存储在本地浏览器上，使用的时候直接调用本地数据就行.

localStorage只支持string类型的存储

存：JSON.stringify(转换字符串)

取：JSON.parse

     12. inheritAttrs

组件传值一般是通过props传值的。inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性添加到子组件的根节点上（说明即使设置为true，子组件仍然可以通过$attr获取到props意外的属性）