Vue Click anywhere on the page to make the subcomponents disappear

I remember using the native js is document.body.onclick = function () {} using vue to add a click event to the root div and try to disappear, but do not know that this method is normal? Don"t you know there"s another way?

<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
    }
  },
Jun.18,2021

it is recommended to put it in the component to facilitate code reuse.

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);  
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b35da8-2ad0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b35da8-2ad0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?