Vue 点击组件外部隐藏组件自身

在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选件等。

 

示图：点击外层元素隐藏自定义车牌选择框

 

代码如图中所写：

核心：

 

1、最外层div中添加一个@click.stop（取消事件冒泡），可以不添加事件名。

 

2、在mounted给body添加一个点击事件，事件触发组件的隐藏。

    document.body.addEventListener('click', () => {
        this.show = false;
    }, false);