1. 起因
上个星期在做项目里的一个类似modal组件，撇开所有内容和布局方面的需求，modal组件的基本要求就是显示和隐藏。不说其它，先上代码如下：
父组件
子组件
2. 问题
这是一个结构非常简单的组件，例子中也就一个主页面的父组件和一个子的模态框组件。通过visible控制模态框的显示和隐藏，这里通过.sync语法糖来使得数据双向绑定。一切就绪，点击父组件中的显示按钮，模态框正常弹出全屏覆盖，但问题来了，点击关闭按钮时却无法关闭模态框，这让我很费解，于是开始了下面的猜想和排查。
3. 排查
这里我怀疑以下两点出了问题：
- 子组件关闭按钮事件没有触发
- 双向绑定失效
子组件关闭按钮事件没有触发，这个问题不难查，在close方法中插入以下代码
close() {
console.info('in'); //in
this.$emit('update:visible', false);
}
运行结果显示是有打印出in的，证明该事件方法有被触发到，那么问题就是第二个了。
双向绑定失效，这个指的是数据通过props传入子组件，如例子中的visible，且在变量后面加上.sync修饰符以达到双向绑定的目的（Vue官网有解释sync）。这里我怀疑是双向绑定失效导致的数据没有更新，打开Vue DevTools，定位到当前组件，当我点击关闭按时发现父组件的visible变量并没有更新到，依然还是处于true的状态。于是，我觉得这个猜测可能是正确的，便开始在网上查找相关的资料，发现在vue的issue里有过这个问题，但查阅发现没有什么特别的解决方法，有人提到尝试写成非语法糖的形式，即如下：
//父组件
<v-modal :visible="visible" @update:visible="visible"></v-modal>
但是，当我更新代码后发现还是没能解决这个问题，模态框依然无法关闭，我开始有点慌了。喝杯水冷静下来，我觉得得换一种思路，既然无法解决这个双向绑定的问题，那么就不要双向绑定试下，我尝试不把弹窗写成组件，而是把它嵌入到父组件中尝试（这不是一个好的选择，然而要赶时间不得已的处置），于是把代码改成如下
//父组件，直接嵌入弹窗代码
<div v-show="visible">
<header>
<e-icon slot="left" icon="close" @click.native="visible = false"></e-icon>
<span slot="center">modal title</span>
</header>
<!-- other code -->
</div>
抱着不得已的心情更新了代码，点击关闭发现依然无法解决这个问题，整个人都不好了，我再次喝杯水冷静下来，希望能看出究竟哪里出了问题。查看Vue的官网文档，里面讲双向绑定不是真的数据双向绑定，而是一种用update事件去更新的父组件值的做法而已。于是我回到一开始的代码，打开Vue DevTools，查看最上面的事件触发记录器
事件触发记录
再次点击关闭按钮，这时候我发现事件记录加多了一条，这证明双向绑定是生效的，只不过由于某种原因值没有改变或是改变了两次。但代码很简单，没有多余的改变状态的事件方法了。事情再次没有进展。
4. 解决
做了一下午卡在这个问题上，当自己实在想不到什么头绪时，我觉得还是得求助下旁人，于是我去请假了我的小伙伴。跟同事描述了这件事情，也展示了代码给他看，他看完我的操作后提出的问题基本和我一开始想的一致，但是他说到一点我没有去怀疑的事情，就是事件冒泡，他的想法很简单，就是肯定有触发到改变变量的事件方法。一开始我是说不可能的，没有点击到怎么会触发事件，但没办法，其它的方法都试过了，我便开始尝试将唯一一个visible=true的事件设定成自身触发，如下
//父组件，触发点击方法加入修饰符.self
<template>
<div class="main-panel" @click.self="visible = true">
<!-- other code -->
<v-modal :visible.sync="visible"></v-modal>
</div>
</template>
更新代码后，发现成功关闭了！看来问题是出在了这里，其实换个念头想这事情就说得通了，子组件嵌套在父组件中，点击事件自然会往上冒泡，最后被上级的点击事件捕获。我们可以稍微修改下代码验证猜想
//父组件
<template>
<div class="main-panel" @click="visible = true">
<!-- other code -->
<v-modal :visible.sync="visible"></v-modal>
</div>
</template>
<script>
import VModal from "./Panel";
export default {
components: {
VModal
},
data() {
return {
visible: false
};
},
methods: {
click() {
console.info('touch')
this.visible = true;
}
}
};
</script>
当我们尝试关闭子组件的显示时，可以发现控制台打印了touch，这就证明了关闭的时候事件往上冒泡触发到了父组件的click事件，导致值改了两次。最后，我想说的是，不要一开始就把问题想得太过于复杂了[捂脸笑]
网友评论