vue子组件调用父组件方法

2022-08-16 19:51:43 浏览数 (1)

强迫学习的东西是不会保存在心里的。——《柏拉图论教育》

首先我们在子组件中这样定义

代码语言:javascript复制
<template>
	<div>
		<el-button @click="callSuper">123</el-button>
	</div>
</template>

<script>
export default {
	methods: {
		callSuper() {
			this.$emit('parentEvent', '我的');
		}
	}
};
</script>

这里的组件就只有一个el-button,点击后执行callSuper函数

里面这行this.$emit('parentEvent', '我的');表示

调用在父组件 引用子组件时 传入的事件

例如我这里调用了parentEvent,传入了个“我的”作为参数

然后这样我们在 引用子组件 的时候就需要这样写

代码语言:javascript复制
<template>
	<div>
		<hello-world @parentEvent="toYoung"></hello-world>
	</div>
</template>

<script>
import HelloWorld from '../../../components/HelloWorld.vue';
export default {
	components: { HelloWorld },
	methods: {
		toYoung(msg) {
			console.log(msg);
		}
	}
};
</script>

这里定义@parentEvent事件,然后传入toYoung函数作为参数

这样就实现了子组件点击时触发父组件方法

0 人点赞