¿Cómo puedo saber si el elemento HTML que se teletransportó al cuerpo estaba originalmente en un componente específico?
Componente.vue:
<template> <div class="parent"> <p>This is parent</p> <teleport> <p>This is teleported content</p> </teleport> </div> </template>Documento:
<body> <div id="app"> <div class="parent"> <p> This is parent </p> </div> </div> <p class="teleported">This is teleported</p> </body>Así que ahora en mi código necesito detectar de alguna manera que p.teleported está realmente dentro de Component.vue
Lo que estoy tratando de lograr es detectar clics fuera de dichos componentes. Las soluciones existentes no funcionan porque mis componentes se pueden anidar y teletransportar varias veces y tengo que rastrearlos a todos.
Si necesita tener un seguimiento único para cada telepuerto, puede usar el atributo de datos y establecer un contador o algo así.
En caso de que solo necesite saber el nombre del padre, puede establecerle un atributo común o un nombre de clase.
Componente.vue:
<template> <div class="parent"> <p>This is parent</p> <teleport to="body"> <p :data-target=`parentName-${counter}`>This is teleported content</p> </teleport> </div> </template> <template> <div class="parent"> <p>This is parent</p> <teleport to="body"> <p data-target="parentName">This is teleported content</p> <!-- Or you could simply set a classname to it <p class="parentName">This is teleported content</p> --> </teleport> </div> </template> Ahora puede acceder a estos mediante document.querySelectorAll("[data-target]") y agregarles eventos onclick en el archivo donde desea que ocurra la magia.
Espero que esto pueda ser útil
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes