根据 简书 DogRod的思路
这里用到了vue的自定义指令
详情参数可以在vue官网查询

html部分

  <div v-clickout="list">xxx</div>
  //list为for循环的参数这里的list为binding.value
  //list可以改为自己定义的方法js逻辑则改用expression判断实现调用
  <div v-if="list.showSearch"><div>

js部分

 directives: {
    clickout: {
      bind(el, binding) {
      console.log(el,binding)//el为当前绑定自定义指令的dom元素
    	//binding为当前元素对象
    	//可以发现在当前元素对象上存在一些参数vue官网都有写到
        const  clickHandler =(e)=> {
        //event对象
          if (el.contains(e.target)) {
          //contains方法用来查看dom元素的包含关系，
          //判断当前点击元素是否嵌套在el元素内 是就返回false
            return false;
          }
          if (binding.value) {
          //binding.value为当前指令所绑定的值
           //因为项目的原因 这里隐藏的条件是接口返回的参数实现条件渲染判断
            binding.value.showSearch = false;
          }
----------------------------------------------------------------
			 如果想自定义一个方法
  **html**: 
  <div v-clickout="msg">xxx</div>
   //这里的msg为方法 可在methods中定义(方法不要带括号会报错不知为何)
    <div v-if="show"><div>
  **js**： 
     判断条件可以更改自己定义的方法
          if(binding.expression){
         	//expression为当前指令绑定的函数如果绑定了函数则执行当前函数
         	binding.value(e)
          }
          methods:{
          	msg(){
          		this.show=false
          	}
		}
---------------------------------------------------------------
        } // 绑定变量(随便取)并在unbind销毁
        el.ClickOutHide = clickHandler;
        document.addEventListener("click", clickHandler);
        console.log(el.ClickOutHide);//这里打印出来发现是当前函数本身
      },
      unbind(el, binding) {
        // 销毁方法
        document.removeEventListener("click", el.ClickOutHide);
        delete el.ClickOutHide;
      }
    }
  }