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

Question

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点击按钮关闭弹窗呢(或者更好的其他方法也可以)？

Answer 1

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这个函数，这个你已经实现了，我就不多写了

Answer 2

弹框出现还是弹框组件本身控制的，top点击只不过是改值，传递给弹框组件，弹框内部点击button，弹框隐藏把值传给外面就可以了。

<rightBar v-model="dis"></rightBar>

弹框组件内

props: {
      value: {
        type: Boolean,
        default: false
      }
},
    data () {
      return {
        show: this.value
      }
    },
    watch: {
      show (val) {
        this.$emit('input', val)
      }
    }

组件里面就是改变show，它默认抛出input去修改v-model绑定的值。跟1.0里面双向绑定一样。

Answer 3

子组件

props:{
    show: {
        type: Booean,
        default: false
    }
},
methods: {
    close: function () {
        this.$emit('close', false)
    }
}

父组件

<rightBar :show = "show" @close="closeRightBar"></rightBar>
data () {
    show: false
},
methods: {
    changePage () {
        this.show = true
    },
    closeRightBar (val) {
        this.show = val
    }
}