使用场景：

在Vue组件中的元素外部单击以移除该元素

要求：

如上图所示，“用户列表”页面由三个Vue组件组成，分别是“菜单组件”、“导航组件”和“列表组件”。“列表组件”包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域时，下拉菜单被隐藏。

解决方案1:

当“下拉菜单”出现时，创建一个透明的蒙版图层，然后只能点击“下拉菜单”，再点击蒙版图层进行隐藏。

缺点：z-index图层的数量要控制好，如果点击其他功能按钮就无效了，因为有蒙版图层，点击两次就有效了。

解决方案2:

本地监控，在“列表组件”最外面的框中添加一个点击事件，隐藏下拉菜单。并且应该防止“下拉菜单”中的事件冒泡。

缺点：点击“列表组件”有效，而点击“菜单组件”和“导航组件”无效。

解决方案3(推荐):

第一步：定义Vue全局点击功能

//定义全局click函数vue . prototype . global click=function(回调){document.getelementbyid ('main ')。onclick=function(){ callback()；};};提示：

1.参数是click回调函数。

2.在Vue中，无法通过getElementsByTagName获取主体节点，原因不明。

步骤2:监控组件中的全局点击事件

mount ed : function(){ this . global click(this . moresetumpureremove)；}提示：挂载是Vue生命周期钩子中的DOM渲染完成阶段。

第三步：操作

//Remove操作moresetumpremove(){ this。$ refs . moreset upmenu . style . display=' none '；}，如果有更好的方法，欢迎交流！

以上在Vue组件中获取全局点击事件的方法，都是边肖分享给大家的内容，希望能给大家一个参考和支持。