vue父子组件通信

组件通信

在实际开发过程中，子组件有时候需要通过使用父组件的数据来渲染页面；子组件数据的变化需要通知给父组件去做相应的变化，这就涉及到了父子组件之间的通信

具体实现

1、父组件向子组件通信

父组件向子组件发送数据通过props属性来实现，在子组件中通过props来接收传递的值

代码

（1）父组件：将msg传递给子组件，通过v-bind的方式将值绑定到子组件上

<template>
	<child :msg='msg' :items='items'></child>
</template>
<script>
	import child from './child'
	export default{
		data () {
			return {
				msg: 'hello',
				items: []
			}
		},
		components:{
			child: child
		}
	}
</script>

（2）子组件：通过props属性来接收父组件的传值

<template>
	<div>{{msg}}</div>
</template>
<script>
	export default {
		props: {
			msg: String,
			items: {
				type: Array,
				default: [0]
			}
		}
	}
</script>

注：props接收参数时，可以是一个数组[‘msg’]，不需要指定数据类型；也可以是一个对象{msg: String}，指定数据类型，还可以通过default属性指定默认值；如果指定的数据类型不一致，则会发出相应的警告！

2、子组件向父组件通信

子组件向父组件传送值，主要是通过$emit方法来实现的

代码

（1）子组件通过$emit方法将数据发送给父组件，第一个参数表示在父组件中需要触发的函数名称，第二个参数表示要传递的值

<template>
	<div @click='showData'></div>
</template>
<script>
	export default{
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			showData: function(){
				this.$emit('getData',this.msg)
			}
		}
	}
</script>

（2）父组件：在父组件中触发子组件中派发的函数，获取子组件的值

<template>
	<div>
		{{message}}
		<!-- getData就是在子组件的$emit方法的第一个参数,如果是驼峰式命名，则需要修改为中划线模式get-data -->
		<child @get-data='getMsg'></child>
	</div>	
</template>
<script>
	export default {
		data () {
			return {
				message: ''
			}
		},
		methods: {
			getMsg: function(msg){
				this.message = msg
			}
		}
	}
</script>

上述只是我个人在实际开发过程中对vue父子组件通信的一些看法，如果大家有不同的见解，欢迎指正！