Vue中的父子组件传值从父组件控制子组件的显示

最新推荐文章于 2024-08-18 13:53:12 发布

mk1105

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量5.4k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36355178/article/details/88407532

版权

本文介绍了在Vue中如何通过props从父组件控制子组件的显示和关闭，避免了高耦合的实现方式。通过定义属性并使用`v-bind`和`v-on`监听事件，实现子组件的显示和隐藏状态由父组件控制。同时强调了在子组件向父组件传值时注意方法命名规范，避免大小写问题导致的监听失败。

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

今天在工作遇到了一个小问题,需求是在一个vm实例中创建一个组件,是一个弹框,我使用了组件来做这个弹框.在父组件中有一个按钮点击显示子组件.
当子组件显示的时候,子组件左上角有一个× 点击可以关闭他,一开始我是这么做的:

在父组件上定义一个变量,默认为false ,然后使用v-show来控制子组件的显示和隐藏
当子组件显示的时候在子组件上定义变量,默认为true,当点击 ×的时候改变这个变量为false
最后完成这个组件的显示和关闭
**问题是这样代码的耦合性很高,父组件和子组件的判断逻辑复杂,需要同时控制两个属性,很头疼
那么换另一个思路,在父组件上定义一个属性.用来隐藏和显示这个子组件,用props 来传值,当子组件关闭的时候吧这个属性传回给父组件,由父组件身上的隐藏显示方法去关闭这个子组件!
上代码

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子传值</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>我是父组件</p>
			<button  @click="showson"> 点击显示子组件</button>
			<sonbox @formson="fromsonFn" v-show="ctrlloter" :center="ctrlloter"></sonbox>
			
		</div>
		<template id="sonbox">