vue中组件传值的几种方式全面版本

面试时候经常问的一个vue的题学习了一下，总结了几个常用的，应该是覆盖了大部分的使用场景。

1.父传子(props)

父组件向子组件传值用到自定义属性，在子组件中使用props自定义属性，父组件通过v-bind将需要传递的数据绑定到子组件上，这样子组件props里的自定义属性就可以直接使用了，和data里return的数据一样可以直接使用。

//简单演示一下
//子组件
export default {
   
	props:{
   
		value:String
	}
}
console.log(this.value) // hello vue
//父组件
 <Son v-bind:value="'hello vue'"></Son>

2.子传父($emit)

子组件向父组件传值需要使用到$emit自定义事件，子组件通过$emit('自定义事件',传递的数据)发送数据给父组件，父组件绑定该自定义事件后自定义事件接收一个参数，这个参数就是子组件传递过来的数据。

//简单演示正常的话代码比较多
//子组件
export default{
   
	methods:{
   
		goFather(){
   
			this.$emit('goFather','passValue');
		}
	}
}
//父组件
<Son @goFather="getSonValue"></Son>
export default {
   
	methods:{
   
		getSonValue(val){
   
			console.log(val) //passValue
		}
	}
}