vue中子组件给父组件传参

if时光重来

于 2022-01-25 16:09:48 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

分类专栏： js vue html 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/admin_web/article/details/122687137

js 同时被 3 个专栏收录

44 篇文章

订阅专栏

vue

35 篇文章

订阅专栏

html

26 篇文章

订阅专栏

本文介绍Vue中子组件向父组件传递数据的方法。通过@click事件与$emit触发，子组件调用clickFunc方法并传递参数至父组件的childrenFunc方法中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中若想实现子组件给父组件传值，可以通过$emit()传参

子组件

<template>
	<h1 @click="clickFunc">点击后给父组件传值</h1>
</template>
<script>
export default {
	methods: {
		clickFunc() {
			// clickFunc：在父组件中可以监听该方法来获取子组件的传值 
			// 1: 传输的数据
			this.$emit('clickFunc', 1); 
		}
	}
}
</script>

父组件

<template>
	<h1>这里是父组件</h1>
	//childrenFunc： 可以随意定义
	<son @clickFunc="childrenFunc"/> 
</template>
<script>
import son from './son.vue';
export default {
	components: {
		son,
	},
	methods: {
		childrenFunc(val) {
			console.log(val); //获取子组件的传值，打印结果为1
		}
	}
}
</script>