理解框架之Vue组件通信

组件通信方式：

• props / $emit
• $emit / $on
• vuex
• $attrs / $listenters
• procvide / inject
• $parent / $children
• $root & refs

props / $emit

最常用的父子组件通信方式。

父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过 Props 属性获取对应数据。

特点：符合单向数据流，即子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据。

// 父组件 
<template> 
    <div class="container"> 
    <child :title="title"></child> 
    </div> 
</template> 
<script> 
import Child from "./component/child.vue"; 
    export default { 
    name: "demo", 
    data: function() { 
        return { 
            title: "我是父组件给的" 
        }; 
    }, 
    components: { 
        Child 
    }, 
}; 
</script>

// 子组件 
<template> 
    <div class="text">{{title}}</div> 
</template> 
<script> 
export default { 
    name: 'demo', 
    data: function() {}, 
    props: { 
        title: { 
            type: String 
        } 
    }, 
}; 
</script>

PS：组件中的数据共有三种形式：data、props、computed

$emit / $on

eventBus事件总线

通过创建一个空的 vue 实例，当做 $emit 事件的处理中心（事件总线），通过他来触发以及监听事件，方便的实现了任意组件间的通信，包含父子，兄弟，隔代组件。

//home.vue

<template> 
    <div> 
    <div>我是父元素，我的num的值是：{{num}}</div> 
    <a-comp :event="bus" :num.sync='num'></a-comp> 
    <c-comp :event="bus" :num='num'></c-comp> 
    <b-comp :event="bus"></b-comp> 
    </div> 
</template> 
<script> 
import Vue from 'vue'; 
import aComp from './a.vue'; 
import bComp from './b.vue'; 
import cComp from './c.vue'; 
// 创建一个空的vue实例 
const bus = new Vue(); 
export default { 
    'name': 'example', 
    data() { 
        return { 
            bus, 
            'num': 1 
        }; 
    }, 
    'components': { 
        aComp, 
        bComp, 
        cComp 
    } 
}; 
</script>

<!--a.vue--> 
<template> 
    <div class="a-content"> 
        我是组件A， 
        <el-button type="primary" @click="send">
            点击我向B发送东西
        </el-button> 
    </div> 
</template> 
<script> 
export default { 
    'name': 'aComp', 
    'props': [ 
        'event', 
        'num' 
    ], 
    data() { 
        return {
            'nb': 0
        }; 
    }, 
    created() { 
        this.nb = this.num; 
    }, 
    'methods': { 
        send() { 
            this.nb = this.nb + 1; this.$emit('update:num', this.nb); 
            // 通过$emit 来触发phone-a事件 
            this.event.$emit('phone-a', '我是组件A啊', this.nb); 
        } 
    } 
}; 
</script>

<!--c.vue--> 
<template> 
    <div> 我是组件C， 
        <el-button type="primary" @click="send">
            点击我向B发送东西
        </el-button> 
    </div> 
</template> 
<script> 
export default { 
    'name': 'cComp', 
    'props': [ 
        'event', 
        'num' 
    ], 
    data() { 
        return {}; 
    }, 
    'methods': { 
        send() { 
            this.event.$emit('phone-c', `我是组件C啊${this.num}`); 
        } 
    } 
}; 
</script>

<!--b.vue--> 
<template> 
    <div class="b-content"> 
        <div>
        我是组件B，我会接收组件A及组件C
        </div> 
        <div> A: {{a}} </div>
        <div> B: {{c}} </div> 
    </div> 
</template> 
 <script> 
 export default { 
     'name': 'bComp', 
     data() { 
         return { 
             'a': '', 
             'c': '' 
         }; 
     }, 
     'props': ['event'], 
     mounted() { 
         // 通过$on来监听 phone-a 、phone-c 事件 
         this.event.$on('phone-a', (a, num) => { 
             this.a = `${a},我在改变父元素传过来的值num: ${num}`; 
         }); 
         this.event.$on('phone-c', c => { 
             this.c = c; 
         }); 
     } 
 }; 
 </script>

$on 监听了自定义事件 phone-a和phone-c，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

PS：必须要在公共的实例中才能实现数据的互相传递。

vuex

原理

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

各模块在流程中的功能：

• Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
• dispatch：操作行为触发方法，是唯一能执行action的方法。
• actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
• commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
• mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
• state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
• getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

• 应用层级的状态应该集中到单个 store 对象中。
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
• 异步逻辑都应该封装到 action 里面。

只要遵守以上规则，如何组织代码都可以。如果store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

$attrs / $listeners

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

// index.vue 
<template> 
    <div> 
    <h2>浪里行舟</h2> 
        <child-com1 
        :foo="foo" 
        :boo="boo" 
        :coo="coo" 
        :doo="doo" 
        title="前端工匠" >
        </child-com1> 
    </div> 
</template> 
<script>
const childCom1 = () => import("./childCom1.vue"); 
export default { 
    components: { 
        childCom1
    }, 
    data() { 
        return { 
            foo: "Javascript", 
            boo: "Html", 
            coo: "CSS", 
            doo: "Vue" 
        }; 
    } 
}; 
</script>

// childCom1.vue 
<template class="border">
     <div> 
         <p>foo: {{ foo }}</p> 
         <p>childCom1的$attrs: {{ $attrs }}</p> 
         <child-com2 v-bind="$attrs"></child-com2> 
     </div>
</template> 
<script> 
const childCom2 = () => import("./childCom2.vue"); 
export default { 
    components: { 
        childCom2 
    }, 
    inheritAttrs: false, 
    // 可以关闭自动挂载到组件根元素上的没有在props声明的属性 
    props: { 
        foo: String 
        // foo作为props属性绑定 
    }, 
    created() { 
        console.log(this.$attrs); 
        // { "boo": "Html", "coo": "CSS", 
        // "doo": "Vue", "title": "前端工匠" } 
    } 
}; 
</script>

// childCom2.vue 
<template> 
    <div class="border"> 
        <p>boo: {{ boo }}</p> 
        <p>childCom2: {{ $attrs }}</p> 
        <child-com3 v-bind="$attrs"></child-com3> 
    </div> 
</template> 
<script> 
const childCom3 = () => import("./childCom3.vue"); 
export default { 
    components: { 
        childCom3 
    }, 
    inheritAttrs: false, 
    props: { 
        boo: String 
    }, 
    created() { 
        console.log(this.$attrs); 
        // { "coo": "CSS", "doo": "Vue", "title": "前端工匠" } 
    } 
};
 </script>

// childCom3.vue 
<template> 
    <div class="border"> 
        <p>childCom3: {{ $attrs }}</p> 
    </div> 
</template> 
<script> 
export default { 
    props: { 
        coo: String, 
        title: String 
   } 
}; 
</script>

$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

provide / inject

Vue2.2.0新增API，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

// A.vue
export default {
  provide: {
    name: 'this is A Component Attribute'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // this is A Component Attribute
  }
}

PS：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档

$parent / $children

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
• $parent / $children：访问父 / 子实例

PS: 这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

<template> 
    <div class="b-content"> 
        <div>我是子组件</div> 
        <span>{{msgText}}</span> 
    </div> 
</template> 
<script> 
export default { 
    'name': 'childComp', 
    data() { 
        return { 
            'msgText': '', 
            'childMsg': '来自子元素的呐喊' 
        }; 
    }, 
    created() { 
        this.msgText = this.$parent.parentMsg; 
        // MsgText: 来自父组件的呵呵 
    } 
}; 
</script>

$children可以遍历全部子组件，需要注意 $children 并不保证顺序，也不是响应式的。

<template> 
<div class="b-content"> 
<div>我是父组件</div> 
<child-comp></child-comp> 
</div> 
</template> 
<script> 
import childComp from './child'; 
export default { 
    'name': 'parentComp', 
    data() { 
        return {
            'parentMsg': '来自父组件的呵呵'
        }; 
    }, 
    'components': {
        childComp
    }, 
    mounted() { 
        // 读取子组件数据，注意$children子组件的排序是不安全的 
        console.log(this.$children[0].childMsg); 
        // 来自子元素的呐喊 
    } 
}; 
</script>

$root & refs

$root 属性是在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。如：

// Vue 根实例 
new Vue({ 
    data: { foo: 1 }, 
    computed: { 
        bar: function () { 
        /* ... */ 
        } 
    }, 
    methods: { 
        baz: function () { 
        /* ... */ 
        } 
    } 
})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

$refs属性当你需要在 JavaScript 里直接访问一个子组件。你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。例如：

<my-component ref="childrenCompA"></my-component>

//访问子组件
this.$refs.childrenCompA

PS：$parent / $children; $root & refs 这两种方法的弊端是，无法在跨级或兄弟间通信。

总结

常见使用场景可以分为三类：

• 父子通信： 父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；$root & refs也可以访问组件实例；provide / inject API；$attrs/$listeners
• 兄弟通信： Bus；Vuex
• 跨级通信： Bus；Vuex；provide / inject API、$attrs/$listeners