Vue.js 踩坑分享涉及v-show以及子传父

最新推荐文章于 2022-06-30 17:41:20 发布

悠灵本林

最新推荐文章于 2022-06-30 17:41:20 发布

阅读量341

点赞数 1

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

本文链接：https://blog.csdn.net/youyo_littleboy/article/details/120667475

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文分享了一个Vue.js开发中遇到的弹窗无法关闭的问题。问题在于v-show绑定的值在父组件和子组件间不同步。通过使用子组件向父组件传递事件的方式解决了这个问题。在子组件中定义了`handleOnclick`方法，触发$emit传递值，父组件通过v-on监听并响应，实现弹窗的开关控制。

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

Vue.js 踩坑分享涉及v-show以及子传父

遇坑描述：

本来想做一个弹窗效果的，但是遇到一个问题就是，可以打开弹窗，但是关闭不了。

后来通过console方法发现两个值不一致，例如我v-show绑定的值是a，a的初始打印值是false，通过父组件点击之后变成true，这部分没问题；

但是子组件显示（即弹窗），点击关闭按钮，初始打印变成undefined，后面正常，这意味着值并不是同一个值。

通过百度查询想到了值存在级别问题，后用子传父方法解决。

踩坑解决

子组件

<template name="aaa">
	<view class="action" @click="handleOnclick">
		点我
	</view>
</template>
...
...
...
methods: {
			handleOnclick(){
			//childByValue为绑定响应事件名
			//''，为传递值
				this.$emit('childByValue','')
			}
		},

父组件

<!-- 通过v-on监听childByValue，绑定响应函数humanHandler -->
<aaa v-on:childByValue="humanHandler"></aaa>
...
...
...
methods: {
			//响应方法 humanHandler
			humanHandler: function(){
			this.isHumanShow = !this.isHumanShow;
			}
		},