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}}的位置上。





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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐