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}}的位置上。
纯手写,如有不对请指出哦~