这里谈三种方法,当然使用的是路由<router-link>。<div>同样也可以控制。
在进行页面功能的实现的时候,我们常常会遇到这样的情况,点击按钮出来一个弹窗,再点击弹窗里面的内容,跳到详情页,这时问题就来了,弹窗如果不关闭,影响详情页的浏览,所以,我们要关闭弹窗!!!!!
这是场景。下面讲述方法:
1. 使用click事件,在组件之间层层传递函数,控制弹窗显示的变量favVisible的布尔值。
2. 使用路由监控,这个方法的前提条件是使用的是路由在页面里面。监控方法如下:
watch: {
$route (val) {
if (this.favVisible) {
this.favVisible = false
}
}
}
当然使用的是vue
3. 第三种方法,也是比较厉害的。名叫阻止冒泡。对,就是你在阻止各种点击之间乱窜的阻止冒泡方法。在vue文档里有一处定义事件处理器,里面有一个事件修饰符。甩上链接自己看:http://cn.vuejs.org/v2/guide/events.html#事件修饰符。那是阻止冒泡的方法。
上代码吧,自己看:
closeFavor (e) {
if(closest(e.target, '.favorite-item')) {
this.favVisible = false
}
}
上述代码的favorite-item,就是<router-link>标签里面定义的类。这种方法好在哪里呢,就是减少了组件之间方法的层层传递。
这样就完事了,附文字一段,洗刷焦躁的心。
美在于发现,在于邂逅,是机缘。
凌晨四点钟,看到海棠花未眠。
即使和幽灵同处地狱也能心安理得;随便什么时候都能拔腿而去。
这就是我,一个天涯孤客心底所拥有的自由。
——川端康成 《花未眠》