vue父子组件传值之 $emit和props

前言

在进行vue的项目中，我们难免会需要父子组件之间进行传值，父子组件传值可以通过$emit和props,eventbus,vuex等，本文主要介绍第一种方法。

子组件向父组件传值

子组件向父组件传值利用的是$emit

假设我们的父组件为：

<app></app>

里面嵌套了子组件：

<app><child></child></app>

假设子组件的内容为：

<div><p>我是子组件</p><p>{{message}}</p><button></button></div>

我们想当点击按钮时将子组件中 message 的内容传递给父组件：

1. 在子组件中

为button绑定click事件

<button @click="submit()"></button>

当触发点击事件时,在函数中使用$emit

submit () {this.$emit('childFn',this.message)}

其中$emit中的两个参数，第一个为父组件的事件，第二个为想要传的值

2. 在父组件中

在引用子组件的位置，写入事件：

<app><child @childFn="parentFn"></child></app>

在 parentFn() 函数中，写入传的参数，获取子组件中 message 的值：

parentFn (message) {this.getMessage = message}

这样就将子组件中的 message 值存到了父组件中的 getMessage 中了。

父组件向子组件传值

父组件向子组件传值利用的是props

假设我们的父组件为：

<app></app>

里面嵌套了子组件：

<app><child></child></app>

假设子组件的内容为：

<div><p>我是子组件</p><p>{{childMessage}}</p><button></button></div>

我们想将从父组件中获取的内容放置在message的位置上：

1. 在子组件中

增加props:

export default {props: ['childMessage'],data () {return {...}}

2. 在父组件中

为嵌套的子组件绑定传的值：

<app><child :childMessage="parentMessage"></child></app>

其中，parentMessage为父组件中 data 里的值：

export default {data () {return {parentMessage: '我是来自父组件的值'}}

以上，就可以将父组件中 parentMessage中的值传递给子组件childMessage中，并显示在 {{childMessage}}的位置上。

纯手写，如有不对请指出哦~