Как добавить обаботчик клика на document после хука mounted компонента на vue 3?(а не одновременно)?

Question

[Илья Кочкин]

Добрый день, коллеги, подскажите пожалуйста, хочу повесить событие клика в дочеренем компоненте на document сразу же после его монтирования, но при клике на на кнопку в родительском компоненте, которая отвечает за отображение дочернго компонента, срабатывает как раз это событие клик "outsideClick", хотя я хочу чтобы следуюший клик обрабатывался а не этот килк по кнопке

//Parent.vue

<template>
<button @click ="toggleVisible" >click me</button>
    <Сhild v-if="visible" >
   </Child>

</template>

<script setup>

import {ref} from "vue";
import ComponentModal from "./Child.vue";
const visible = ref(false);

async function toggleVisible() {
  visible.value = !visible.value
}

</script>

//Child.vue

<template>
//...
</template>

<script setup>
import {unMounted, ref} from "vue";
import ComponentModal from "./Child.vue";

onMounted(()=>{
  document.addEventListener('click', outsideClick)
});


const outsideClick = (e) => {
  console.log('click')
 
  }
}


</script>

Comments

[modelair]

что такое "следующий клик"?

[Илья Кочкин]

modelair, т.е. на клике на кнопку которая вызвает дочерний компонент событие outsideClick не должно сработать

Answer 1

[RAX7]

Проще было бы использовать готовое решение https://vueuse.org/core/onClickOutside/
Но, если хочется написать свой велосипед, то можно примерно так: https://play.vuejs.org/#eNqVUsuOnDAQ/JUOJ5AIc58wKK...

Comments

[Илья Кочкин]

тоже думал про фильтрацио кнопки - но не догадался реф прокинуть

[RAX7]

Илья Кочкин, возможно в твоем случае достаточно только ловить событие на стадии погружения

document.addEventListener("click", outsideClick, true)

[Илья Кочкин]

RAX7, стработало, только я не понимаю почему...