vue中组件传值的方式总结（自己总结 父子 兄弟 组件传值）

一.普通的父子组件传值

1. 父组件传递给子组件

父组件代码：父组件向子组件传递一个值，直接通过绑定属性的方式传递，在子组件上绑定一个属性。 这里绑定了一个那么属性传递值。

子组件接收父组件传递过来的值：

这样子组件就接收到了父组件传递过来的 张三 的name值

2. 子组件传递给父组件
子组件给父组件传值需要通过自定义事件来传递
子组件代码：

methods:{
	sayThank(){
	//this.$emit('自定义事件名称'，传递的值）
		this.$emit('thankFather','谢谢父亲')
	}
}

//父组件代码

接收子组件的内容：{{content}}
methods: {
	getThank(e){
		console.log(e)
		this.content=e
	}
}

当然如果子组件给父组件传值很多。我们可以以对象形式传递过来数据。 传递的参数还是this.$emit(‘自定义事件名称’，传递的值）

二：兄弟组件传值
父组件内同时引入两个平级的组件，这两个组件就是兄弟组件，兄弟组件直接如何进行传值呢？
父组件内的代码：增加引入了brother这个组件

	
		
我是父组件
		
		接收子组件的内容：{{content}}
		
		
	

我们通过vue中的事件总线 $eventBus来进行值的传递
在main.js页面我们直接把事件总线挂载在Vue原型上

Vue.prototype.$EventBus = new Vue()

在son组件内，我们通过按钮事件传递值
重点是通过this.$eventBus来传值

给父组件传值
method:{
	sayThank(){
		this.$EventBus.$emit('helloBrother','你好，我的兄弟')
	}
}

brother组件内

这样，兄弟组件传值就成功了

另外的传值方式 就是用vuex来进行传值了。vuex我们下一次继续讲。