Vue 组件间通讯重要指以下 3 类通讯：父子组件通讯、隔代组件通讯、兄弟组件通讯
1.props / $emit 适用 父子组件通讯
props是父组件将值传给子组件，$emit是子组件通过派发变乱的方式将值传给父组件
2.ref 与 $parent / $children 适用 父子组件通讯
1）ref：如果在平凡的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
2）$parent / $children ：访问父、子实实例，必要留意的是：
children是一个数组，由于子组件大概有多个，通过parent和$children可以直接修改父子组件的data
Parent.vue
<Child /><Child /><Child />{ data(){ return { parentMsg:'parent' } }, mounted(){ this.$children[0].childMsg = 'changed' }}Child
{ data(){ return { childMsg:'child' } }, mounted(){ this.$parent.parentMsg = 'changed' }}3.EventBus ($emit/$on) 适用于 父子、隔代、兄弟组件通讯
这种方法通过一个空的 Vue 实例作为中央变乱总线（变乱中央），用它来触发变乱和监听变乱，从而实现任何组件间的通讯，包罗父子、隔代、兄弟组件：
使用EventBus我们必要实例化一个空的不具备DOM的Vue，为方便使用，可以把其挂在项目将实例的Vue的原型上
main.js
Vue.prototype.$EventBus = new Vue()CompnentA
{ methods:{ testA(){ this.$EventBus.$emit('cmaFunction',params) } }}ComponentB
{ mounted(){ this.$EventBus.$on('cmaFunction',(params)=>{ console.log(params) }) }}4.$attrs/$listeners 适用于 隔代组件通讯
- attr包罗了父作用域中不作为prop被辨认(且获取)的特性绑定(class和style除外),而且可以通过v−bind="
attrs"继承向下转达,通常共同 inheritAttrs 选项一起使用(inheritAttrs=true的时间，转达的属性会加到子组件的根元素上)
比方：
Parent.vue
<Child name="jack" age="18" weight="135">Child.vue
/可以将$attrs继承传向后代组件<GrandSon v-bind="$attrs">{ props:['weight'], mounted(){ //这里'weight'已经被作为props辨认了，以是¥attrs上不再包罗weight属性 console.log(this.$attrs) // {name:'jack',age:'18'} }}GrandSon.vue
{ mounted(){ console.log(this.$attrs) //{name:'jack',age:'18'} }}
- listeners：包罗了父作用域中的(不含.native修饰器的)v−on变乱监听器。它可以通过v−on="
listeners" 传入内部组件
比方：
Parent.vue
<Child v-on:click="myClick">Child.vue
//可以将$attrs继承传向后代组件<GrandSon v-bind="$listeners">{ mounted(){ console.log(this.$listeners) // {name:'jack',age:'18'} }}GrandSon.vue
{ mounted(){ console.log(this.$listeners) //{name:'jack',age:'18'} }}5.provide / inject 适用于 隔代组件通讯
先人组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 重要办理了跨级组件间的通讯问题，不外它的使用场景，重要是子组件获取上级组件的状态，跨级组件间创建了一种主动提供与依赖注入的关系。
Parent.vue
{ provide:{ foo:'bar' }}GrandSon.vue
{ inject:['foo'], mounted(){ console.log(this.foo) // bar }}6.Vuex 适用于 父子、隔代、兄弟组件通讯
Vuex 是一个专为 Vue.js 应用步伐开辟的状态管理模式。每一个 Vuex 应用的焦点就是 store（堆栈）。“store” 根本上就是一个容器，它包罗着你的应用中大部门的状态 ( state )。
- Vuex 是一个专为 Vue.js 应用步伐开辟的状态管理模式。每一个 Vuex 应用的焦点就是 store（堆栈）。“store” 根本上就是一个容器，它包罗着你的应用中大部门的状态 ( state )。
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。如许使得我们可以方便地跟踪每一个状态的变革
vuex重要包罗以下几个模块：
- State：界说了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：答应组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部盘算属性。
- Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
- Action：用于提交 mutation，而不是直接变动状态，可以包罗恣意异步使用
- Module：答应将单一的 Store 拆分为多个 store 且同时生存在单一的状态树中。
|
