VUE小白笔记：父组件调用子组件中的methods方法并向父组件传值

最新推荐文章于 2024-09-20 14:40:38 发布

Genius mao

最新推荐文章于 2024-09-20 14:40:38 发布

阅读量749

点赞数 1

分类专栏： vue学习

本文链接：https://blog.csdn.net/GeniusMao/article/details/119726726

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何通过父子组件通信实现点击后弹出全屏页面的效果，不创建新的页面。通过v-if指令控制显示隐藏，使用$emit触发父组件方法，传递参数并关闭弹窗。详细展示了父组件和子组件的模板、脚本及样式代码，实现了点击蓝色盒子显示绿色全屏盒子，并在点击绿色盒子后关闭的功能。

摘要由CSDN通过智能技术生成

应用场景：页面中点击添加或筛选等按钮，弹出的页面要求占据整个视图（不创建新页面的情况）

父组件：

<template>
	<view class="wrapperBox">
		<son v-if="isShow" v-on:submit="getSubmit" ></son>
		<view @click="showSon" class="clickBox" v-if="!isShow" >绿色的son盒子出现</view>
	</view>
</template>

<script>
	import son from "../../../components/son.vue"
	export default {
		components: {
			son
		},
		data() {
			return {
				isShow:false
			}
		},
		methods: {
			showSon(){
				this.isShow=!this.isShow
			},
			getSubmit(data){
				console.log(data)
				this.isShow=!this.isShow
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
	.clickBox{
		width: 100px;
		height: 100px;
		background-color: #007AFF;
	}
</style>

子组件：

<template>
	<view class="sonBox" @click="clickSon">
		123
	</view>
</template>

<script>
	export default {
		methods:{
			clickSon(){
				console.log('son 被点击');
				let params='子组件传递给父组件的参数'
				this.$emit("submit",params)
			}
		}
	}
</script>

<style>
	.sonBox{
		width: 100px;
		height: 100px;
		background-color: #4CD964;
	}
</style>

父组件初始页面：

点击父组件蓝色盒子，蓝色盒子消失，子组件绿色盒子出现，通过v-if=“isShow” 控制两个盒子的显示和隐藏，但是点击绿色盒子想要改变v-if=“isShow”的状态，需要在父组件中调用子组件的点击方法，因为v-if=“isShow”的值在父组件中定义

通过在子组件中，调用$emit,submit 是在父组件中传递的方法名，params是传递的参数

methods:{
			clickSon(){
				console.log('son 被点击');
				let params='子组件传递给父组件的参数'
				this.$emit("submit",params)
			}
		}

父组件中用v-on来获取子组件事件

//调用子组件
<son v-if="isShow" v-on:submit="getSubmit" ></son>


//获取子组件方法，得到子组件参数
getSubmit(data){
				console.log(data)
				this.isShow=!this.isShow
			}