vue组件间的传值

  我之前有篇博客写了关于vue-cli脚手架的安装教程，没有看过的可以点击链接进行查看，写的挺详细的。最近在看vue的一些教程，看到断断续续的，有点惭愧啊！看到了vue中组件之间的传值就记录了下来方便查看。
  首先，vue中组件之间的传值分为：父子之间的传值和兄弟之间的传值。

父子之间的传值

父组件传递给子组件值

1. 父组件中引入子组件，并注册子组件(就是引入该组件)
2. 父组件中使用子组件
3. 父组件调用子组件时使用 v-bind 绑定传递给子组件的值
4. 在子组件中使用 props 接收传递到的值

子组件传递给父组件值

1. 在子组件中使用 ‘this.$emit(‘自定义方法名’，值)’，如下：

<p @click="SendMsg">登陆</p>

//methods方法中
	methods:{
		SendMsg(){
			//GetMsg是在父组件中要自定义事件的方法名
			this.$emit("GetMeg",123)    //123是要传递的值，
		}
	}

2. 父组件中调用子组件的时候要自定义事件 <Child :value=“title” @GetMsg=“Result”/> , 其中value中的值就可以在子组件中用props来接收，GetMsg 就是上一步在子组件中传递的方法名。

//同样在methods方法中接收传递的值
	methods{
		Result(data){    //注意这里的方法名称不是GetMsg，而是Result，GetMsg只是父组件和子组件之间通信的约定
			console.log(data);     //123
		}
	}

兄弟组件之间的传值

  ps:在做大型的项目时，推荐使用vue提供的vuex来管理组件之间的通信
  vue中组件之间不能够像父子组件之间那样直接传值，兄弟组件之间进行传值需要一个中间桥梁，子组件需要先将数据传递给公共组件，然后公共组件再将数据传递给需要的子组件。（等于是所有的子组件都是从公共组件中提取数据）
  创建公共组件Common.vue：

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

1. 在子组件 Child1 和子组件 Child2 中引入Common组件
2. 组件1中：

//methods中
Handleprice(newprice){     //使用 $emit 来绑定
	changeprice.$emit("NewPrice",123);
}

3. 组件2中：

//在接收的时候使用 $on 来接收传值
changeprice.$on("NewPrice",(data)=>{
	console.log(data);   //123
})

  其实，兄弟组件之间的传值也是和vuex原理一样，说实话兄弟组件之间的传值我还不是太清楚，我vuex才接触了一点，还没有深入了解，但是原理应该能明白一些。等我学完vue和vuex之后再给大家详细的介绍这其中的原理。
  因为小编学的也不太深，只能把自己学习时的笔记来解释一番，写的有错误的地方欢迎大家指出，定会改正。