vue组件间通信方式总结vue本身为单页面应用，各组件间实例相互独立。虽然其提供了$parent,$children,$

vue组件间通信

vue本身为单页面应用，各组件间实例相互独立。虽然其提供了 $parent,$ children,$refs等方法可用于访问父组件、子组件内部方法（vue不推荐子组件直接修改父组件属性），但是仍然有许多场景不满足应用中需求。本文将亲身实践过的一些组件间通信的方法总结并分享，其中还有其他的方法后续补充。 demo 地址：github.com/yangchunlan…

1、父组件向子组件传值 props

grand-father.vue页面

2、子组件向父组件传值 emit

父子组件之间传递属性为基本类型，那么在子组件是不允许直接修改父组件值，vue会抛异常。那么我们需要通过emit的方式去间接修改。非基本类型数据可直接修改。

方式一：

father.vue 页面通过方法调用重置父组件属性值

{{msg}}
<button @click="callback">回传</button>
export default {  
    name: 'father',  
    props: ['msg'],  
    methods: {  
    	callback () {  
  			this.$emit('update:msg', '来自于father的修改')  
		}  
	}
}
同时：<father :msg.sync="fromGrandFather"></father>

方式二：

father.vue 页面，通过计算属性computed实现，计算属性实现的好处是：从赋值之前可对父元素传递的值进行处理后使用，同理在修改父元素值时可先处理后回传

{{msg}}
<input type="text" v-model="fromFatherMsg">
export default {
	name: 'father',
    props: ['msg'],
    computed: {
		fromFatherMsg: {
  			get () {
   		 		return this.msg
  			},
  			set (v) {
   				 this.$emit('update:msg', v)
 		 	}
		}
    }
 }
同时：<father :msg.sync="fromGrandFather"></father>

3、兄弟组件、祖孙组件及其他组件间传值 store、中间组件

非直系关系组件间（例如跨父子组件、兄弟组件）相互独立且不能直接通信的，常用的通信方式有三种：

方式一：兄弟组件间可通过父组件传递

即子组件调用父组件的方法 $parent，父组件再传递给其兄弟组件$ refs
官网地址：cn.vuejs.org/v2/api/#vm-…

方式二：其他包含兄弟组件可通过中央仓库转发消息实现：

中央仓库 store.js

import Vue from 'vue'
export default new Vue()

father.vue 通过store转发消息

 <button @click="emitToMother">传递消息给mother</button>
import store from '@/util/store'
export default {
	name: 'father',
    methods: {
    	callback () {
        	this.$emit('update:msg', '来自于father的修改')
        },
        emitToMother () {
  			store.$emit('toMother', '来自于father的消息')
		}
   }
}

mother.vue 在created方法中增加消息监听

<li>来自于father的消息：{{fromFather}}</li>
import store from '@/util/store'
export default {
	name: 'mother',
	props: ['msg'],
	data () {
		return {
			fromFather: ''
		}
    },
    created () {
		const self = this
		store.$on('toMother', function (msg) {
 			 self.fromFather = msg
		})
    }
 }

方式三：通过vuex实现跨页面间通信，一般小型项目不推荐使用。

官网地址：vuex.vuejs.org/zh/guide/

vue组件间通信方式总结