用一些简单的实例总结Vue组件间通信javascriptxicc1112的博客-

props

父组件

<template> <div id="app"> <my-comone :parentmsg="msg"></my-comone> </div> </template> <script> import Comone from './components/Comone.vue' export default {   name: 'App', data() { return {       msg: '父组件的值' } },   components: { 'my-comone': Comone   } } </script> 

父组件在引用子组件的时候，通过属性绑定（v-bind:）的形式，把需要传递的数据传递到子组件内部。
子组件

<template> <div>我是子组件，我通过props获取---{{ parentmsg }}</div> </template> <script> export default { data() { return {} },   props: ['parentmsg'] } </script> 

把父组件传递过来的parentmsg属性，现在props中定义一下，便可使用这个数据。实现了父组件向子组件传值。

详细关于props的知识，请看：https://cn.vuejs.org/v2/api/?#props

events（$emit）

父组件

<template> <div id="app"> <my-comtwo @parentmsg="show"></my-comtwo> </div> </template> <script> import Comtwo from './components/Comtwo.vue' export default {   name: 'App', data() { return {       msgFromSon: null } },   methods: { show(data) { this.msgFromSon = data     } },   components: { 'my-comtwo': Comtwo   } } </script> 

子组件

<template> <div> <p>子组件按钮：</p> <input type="button" value="点我向父组件传值" @click="myclick" /> </div> </template> <script> export default { data() { return {       sonmsg: { name: 'kk', age: 20 } } },   methods:{ myclick(){ this.$emit('parentmsg',this.sonmsg) } } } </script> 

当点击子组件按钮时，通过$emit调用一个事件，子组件的data作为参数传递到父组件，父组件通过v-on监听并接受参数。实现子组件向父组件传值。

$children / $parent

父组件

<template> <div id="app"> <div>{{ msg }}</div> <my-comtwo></my-comtwo> <button @click="change">点击改变子组件值</button> </div> </template> <script> import Comtwo from './components/Comtwo.vue' export default {   name: 'App', data() { return {       msg: '我是父组件的值' } },   methods: { change() { this.$children[0].message = '我是新的子组件的值' } },   components: { 'my-comtwo': Comtwo   } } </script> 

子组件

<template> <div> <span>{{ message }}</span> <p>获取父组件的值为：{{ parentVal }}</p> </div> </template> <script> export default { data() { return {       message: '我是子组件的值' } },   computed: { parentVal() { return this.$parent.msg     } } } </script> 

provide / inject

父组件

<template> <div id="app"><my-comtwo></my-comtwo></div> </template> <script> import Comtwo from './components/Comtwo.vue' export default {   name: 'App', data() { return {} },   provide: {     msg: '我是父组件中的值' },   components: { 'my-comtwo': Comtwo   } } </script> 

子组件

<template> <div>{{ message }}</div> </template> <script> export default { data() { return {       message: this.msg     } },   inject: ['msg'] } </script> 

简单来说就是父组件通过provide向所有子组件提供变量msg，子组件通过inject注入变量msg。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

ref

父组件

<template> <div id="app"> <my-comtwo ref="test"></my-comtwo> <button @click="btn1">ref获取子组件的值</button> </div> </template> <script> import Comtwo from './components/Comtwo.vue' export default {   name: 'App', data() { return {} },   methods: { btn1() {       console.log(this.$refs.test.message) } },   components: { 'my-comtwo': Comtwo   } } </script> 

子组件

<template> <div></div> </template> <script> export default { data() { return {       message: '我是子组件的值' } } } </script> 

可通过ref除了可以获取DOM元素以外，还可以进行父子组件间通信。

eventBus

//event-bus.js import Vue from 'vue' export const EventBus = new Vue() 

父组件

<template> <div> <my-comone></my-comone> <my-comtwo></my-comtwo> </div> </template> <script> import Comone from './components/Comone.vue' import Comtwo from './components/Comtwo.vue' export default {   components: { 'my-comone': Comone, 'my-comtwo': Comtwo   } } </script> 

子组件一

<template> <div> <button @click="btnHandle">num+1</button> <span>num={{ num }}</span> </div> </template> <script> import { EventBus } from '../store/event-bus.js' export default { data() { return {       num: 0 } },   methods: { btnHandle() {       EventBus.$emit('addition', {         num: this.num++ }) } } } </script> 

子组件二

<template> <div> <span>sum：{{ count }}</span> </div> </template> <script> import { EventBus } from '../store/event-bus.js' export default { data() { return {       count: 0 } }, mounted() {     EventBus.$on('addition', param => { this.count = this.count + param.num     }) } } </script> 

eventBus又称为事件重线。用于实现兄弟间以及跨级之间的通信。
如实例主要实现了子组件一自增1，并使用EventBus.$ emit实现数据的发送，组件二中使用EventBus.$ on进行组件内的监听进行数据的接收。实现了兄弟组件间的通信。

本部分eventBus参考文章链接：https://juejin.im/post/5d267dcdf265da1b957081a3#heading-10

总结

父子通信

• 父→子：props
• 子→父：events($emit)
• provide / inject、ref、$children / $parent

兄弟通信

eventBus、ref

跨级通信

eventBus、provide / inject

【Tips：兄弟通信以及跨级通信也可以用Vuex来实现，下次再总结ヾ(◍°∇°◍)ﾉﾞ。】