Vue: componentes y eventos personalizados $emit y slots
Los componentes registrados localmente solo se pueden utilizar en la instancia de Vue actual, no en sus subinstancias.
Los componentes locales se definen en la opción de componentes. Cada componente es una pequeña instancia de Vue que contiene todas las opciones excepto la opción el.
Nombre del componente: personalizado, puede usar nombres de camellos o nombres de guiones, pero tenga en cuenta que si lo aplica a DOM, solo puede usar nombres de guiones; de lo contrario, se informará un error. Tenga cuidado de no utilizar elementos HTML nativos para cambiar el nombre de los componentes.
Opciones de plantilla: Define la plantilla del componente. La plantilla debe contener una etiqueta raíz.
opción props: define las propiedades de la etiqueta del componente. Los nombres de accesorios de CamelCase (postTitle) deben nombrarse utilizando la nomenclatura equivalente separada por guiones (post-title). Nota: Los accesorios son de solo lectura y no se pueden modificar (solución: reenviar los datos recibidos por los accesorios en los datos).
datos: define los datos del componente. Nota: La opción de datos de una instancia de Vue puede ser un objeto o un método que devuelve un objeto. Pero en el componente, la opción de datos debe ser un método que devuelva un objeto de ese método. Dado que los componentes se pueden usar varias veces, si la opción de datos es un objeto, varios componentes usarán los mismos datos.
Los componentes registrados globalmente se pueden utilizar en la plantilla de cualquier instancia raíz de Vue recién creada (nuevo Vue).
Utilice Vue.component para crear componentes globales. El primer parámetro de Vue.component es el nombre del componente.
$emit() se utiliza para activar eventos personalizados. Nota: No se pueden utilizar letras mayúsculas en los nombres de eventos.
Efecto:
Efecto:
la ranura se utiliza para definir la ranura dentro del componente. Todo el contenido HTML entre las etiquetas del componente se representará en la posición de la ranura. .
Efecto: