vue.js - App.vue文件中引入了一个弹窗.vue然后用v-show隐藏掉，添加一个按钮让它显示后，在弹窗.vue文件里怎么让弹窗隐藏掉

问题描述

问 题

我在App.vue文件中引入了一个(弹窗.vue),用v-show隐藏掉，然后在App.vue文件里添加了一个按钮让弹窗显示，这一步没问题，然后我在弹窗.vue文件里面添加一个按钮来让弹窗隐藏掉，那我应该怎么来控制v-show,或者其它写法

App.vue

<a @click="popupShow">显示</a>
<v-showsBox v-show="isShow" @close="isShow.show = false"></v-showsBox> <!-- 弹出层 -->
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    popupShow () {
      this.isShow = true
    }
  }

popup.vue

<a @click="popupClose">关闭</a>
methods: {
  popupClose () {
    this.$emit('close')
  }
}

解决方案

弹窗组件emit一个事件出来，让父组件监听

组件的关闭按钮上绑定点击事件

<a class="z-aside-footer" @click="closeAside">{{closeText}}</a>

methods: {
  closeAside: function() {
    this.$emit('close')
  }
}

父组件：

<z-aside @close="asideLeft.show = false"></z-aside>

这篇关于vue.js - App.vue文件中引入了一个弹窗.vue然后用v-show隐藏掉，添加一个按钮让它显示后，在弹窗.vue文件里怎么让弹窗隐藏掉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！