vue点击页面任意位置让子组件消失

Question

我记得用原生js是document.body.onclick = function(){} 用vue在根div加了一个点击事件 试了一下也能消失 但是不知道这种方法正规吗？不知道还有其他的办法吗<template>  <div @click="none">       <div id="drop-down">         <Dropdown v-if="dd"></Dropdown>       </div>  </div> </template> export default {   name: 'Blog',   data () {    return {       dd: true     }   },   methods: {     none () {      this.dd = false     }   },

Answer 1

建议放到组件里面，比较方便代码复用。

beforeMount() {  this._close = e => {    // 如果点击发生在当前组件内部，则不处理
    if (this.$el.contains(e.target)) {      return;
    }    this.$emit('hide');
  };  
  document.body.addEventListener('click', this._close);
},
beforeDestroy() {  document.body.removeEventListener('click', this._close);  
}