消息关闭
    暂无新消息!

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


3个回答

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

︿ 0

弹框出现还是弹框组件本身控制的,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里面双向绑定一样。

︿ 0

子组件

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