emit
Usando el método emit, puedes activar eventos de forma proactiva, y los eventos activados tienen un mecanismo de burbujeo. El mecanismo de burbujeo significa que el evento burbujea desde el elemento interno hacia el elemento externo, activándose desde el nivel interno hacia el externo.
A continuación se presenta un ejemplo que demuestra cómo usar el método emit para disparar eventos personalizados y utilizar el mecanismo de burbujeo para propagar eventos a elementos externos：
-
I am target
-
-
En este ejemplo, hemos registrado el mismo controlador de eventos personalizado custom-event para el elemento <ul> y el elemento <li>. Cuando usamos el método emit para activar el evento, este burbujea desde el elemento <li> hasta el elemento <ul>, activando ambos controladores de eventos.
Datos personalizados
Al incluir el parámetro data, puedes pasar datos personalizados al handler del evento:
-
I am target
-
-
En este ejemplo, pasamos datos personalizados al manejador de eventos mediante el parámetro data. El manejador de eventos puede obtener los datos pasados a través de event.data.
Disparar eventos sin burbujeo
Si no deseas que el evento se propague, puedes pasar el parámetro bubbles: false al disparar el evento:
-
Soy el objetivo
-
-
En este ejemplo, utilizamos el parámetro bubbles: false para desencadenar un evento personalizado. Este evento no se propaga hacia los elementos superiores, por lo que solo se activa el controlador de eventos del elemento <li>.
Penetrar el nodo raíz
Por defecto, los eventos no atraviesan el DOM de sombra de un componente personalizado. Pero puedes hacer que los eventos personalizados atraviesen el nodo raíz y se disparen en elementos fuera de él estableciendo composed: true.
{{loggerText}}
En este ejemplo, creamos un componente personalizado composed-test que contiene un elemento dentro de un DOM sombra y un botón que activa un evento. Por defecto, los eventos no atraviesan el DOM sombra hacia el nodo raíz. Sin embargo, al usar el parámetro composed: true al activar el evento, permitimos que el evento atraviese hasta el nodo raíz, activando así un elemento fuera del nodo raíz.