vue.js - vue中做的弹窗，在头部组件中点击出现弹窗，怎么实现在弹窗组件中的button点击按钮关闭弹窗呢？求指点

问题描述

问 题

1.主组件app.vue:

<top @display="changePage"></top>
<router-view></router-view>
<rightBar v-show="dis"></rightBar>
<foot1></foot1>

2.头部组件top.vue:(头部元素中点击事件触发父组件app.vue中的display;@click="showTool")
methods: {

  showTool(){
     this.$emit('display');
  }

}
3.弹窗组件rightbar.vue

4.问题：怎么实现在弹窗组件中的button点击按钮关闭弹窗呢(或者更好的其他方法也可以)？

解决方案

app.vue

<top @display="changePage"></top>
<router-view></router-view>
<rightBar v-show="dis" ref="rightbar"></rightBar>
<foot1></foot1>

/*app.vue 一部分js代码,在app.vue这个父组件里面触发子组件rightbar.vue的自定义事件*/
changePage(){
    /*其他代码省略*/
    this.$refs.rightbar.$emit('tiggle');
}

rightbar.vue

/*（这个为最外层div）*/
<div v-show='barShow'>
    <button>关闭</button>
</div>
data(){
    return {
        barShow:false
    }
},
mounted(){
    this.$on('tiggle', function () {
        this.tiggle();
    }); 
},
methods: {
    tiggle: function () {
        this.barShow=!this.barShow;
    }
}

这个的执行原理就是，利用父组件，触发子组件的函数，然后隐藏子组件，你这个的前提就是保证<top @display="changePage"></top>这个能触发父组件的changePage这个函数，这个你已经实现了，我就不多写了

这篇关于vue.js - vue中做的弹窗，在头部组件中点击出现弹窗，怎么实现在弹窗组件中的button点击按钮关闭弹窗呢？求指点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！