vue 子传父，子组件向父组件传值，方法示例

vue 子传父，子组件向父组件传值，方法示例

上一篇介绍父传子props用法，这一篇介绍子传父$emit思路过程：子组件通过执行事件利用$emit发送事件名和需要传递的值；在父组件里面，在子组件的标签上绑定事件名，然后执行事件，将事件的形参赋值出来。

子组件

 // 子组件
<template>
 	<div class="childDiv">
 		// 假设需要点击按钮向父组件传值
 		<button @click="sendVal"></button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				val: '123123'
			}
		},
		methods: {
			// 点击事件，change事件也是一样的写法
			sendVal () {
				// 使用$emit发送事件
				// 第一个参数是发送的事件名，第二个参数是你需要传递的值
				this.$emit("sendMethod", this.val)
			}
		}
	}
</script>

父组件

 // 父组件
<template>
 	<div class="fatherDiv">
 		// 在子组件标签上绑定事件名
 		<ChildDiv @sendMethod="getMthodVal" />
	</div>
</template>
<script>
	// 引入子组件
	import ChildDiv from "./components/childDiv"
	export default {
		data () {
			return {
				fatherVal: null
			}
		},
		// 注册childDiv组件
		components: {
			ChildDiv
		},
		mounted () {
			// 执行getMthodVal方法
			this.getMthodVal()
		},
		methods: {
			// 写入方法
			// 参数val是传递过来的值
			getMthodVal(val) {
				this.fatherVal= val
			}
		}
	}
</script>

子传父就是这么简单，纯手打。谢谢！！~