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);   }