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>
    <p>{{msg}}</p>
</template>
<script>
    export default {
        props: {
            msg: String,
            items: {
                type: Array,
                default: [0]
            }
        }
    }
</script>

注：props接收参数时，可以是一个数组[‘msg’]，不需要指定数据类型;也可以是一个对象{msg: String}，指定数据类型，还可以通过default属性指定默认值

2、子组件向父组件通信

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

代码

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

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

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

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

上述只是我个人在实际开发过程中对vue父子组件通信的一些看法