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>
<
9fb9
span class="hljs-tag"><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父子组件通信的一些看法，如果大家有不同的见解，欢迎指正！