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

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;
			}
		},

解决参考：https://blog.csdn.net/weixin_41910848/article/details/81673733