Vue组件间通信：父子组件通信(1)

Vue组件间通信包括：父子组件间通信，兄弟组件间通信以及模块之间通信等。Vue是数据驱动视图更新的框架, 所以对于Vue来说组件间的数据通信非常重要。Vue实现组件间通信有很多方式，今天我来给大家讲解一下父子组件间通信：props和$emit。

查看演示 下载源码

父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。

本文通过一个实例实现：子组件是一张图片，图片相关信息包括宽度、高度、路径等由父组件传递过来的，点击子组件的图片，调用父组件的方法，将信息告诉给父组件。

父组件向子组件传值：props

props是响应式的，可以做数据绑定。

下面通过实例说明父组件如何向子组件传递数据：在子组件Children.vue中如何获取父组件Father.vue中的数据。

在src/components/文件夹下建一个父组件Father.vue和子组件Children.vue。

在Children.vue中创建props，用于接收父组件传递的值。

<img :src="imgSrc" :width="imgWidth" :height="imgHeight" :alt="title" @click="doSomething">

Children.vue子组件中的，可以直接用this.imgWidth形式获取到父组件传递过来的值。

export default {
    name: 'children',
    props:{
        imgWidth: {
            type: Number,
            default: 300
        },
        imgHeight: {
            type: Number
        },
        title: {
            type: String,
            default: ''
        },
        imgSrc: {
            type: String,
            default: ''
        }
    },
}

根据Vue风格指南中建议的，props 的定义应该尽量详细，至少需要指定其类型。

父组件Father.vue导入子组件：

<hw-child :img-src="imgSrc" :img-width="300" :img-height="imgHeight" title="静态文字" @onEmitFunction="emitFuction"></hw-child>

如果传给子组件的是一个变量或者数字，则需要前面加上：(v-bind的缩写)绑定。

我们使用@onEmitFunction="emitFuction"监听子组件触发的自定义事件。

import Child from './Children.vue'

export default {
    components: {
        hwChild: Child,
    },
    data() {
        return {
            imgHeight: 300,
            imgHeight: 300,
            imgSrc: '//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg'
        }
    },
    methods: {
        emitFuction(val) {
            console.log(val);
            alert('获取子组件参数：'+ val);
        }
    }
}

这时，运行可以看到父组件已经加载子组件，并且成功加载了一张美女图片。

注意：props只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 props 只读，不可被修改，所有修改都会失效并警告。

子组件向父组件传值： $emit

$emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。

在方法函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

我们在Children.vue中绑定了click事件，通过单击来触发方法函数：doSomething()

methods: {
        doSomething() {
            // todo
            const val = '子组件参数xxxx';
            this.$emit('onEmitFunction', val);
        }
    }

很显然，此处使用$emit调用了父组件的方法：onEmitFunction，并且通过此方法传递了参数val给父组件。

再回到父组件Father.vue中，我们使用@onEmitFunction="emitFuction"监听子组件触发的自定义事件onEmitFunction。

在父组件Father.vue中，添加自定义方法函数：

methods: {
        emitFuction(val) {
            console.log(val);
            alert('获取子组件参数：'+ val);
        }
    }

现在运行一下，点击子组件中的图片，弹出提示，获取到了子组件中的数据。

实现Vue组件间通信方式还有其他方式，父子间通信我们还可以用到$ref，下期我们接着将$ref的使用，敬请关注。