Nomenclatura adecuada para los props y emits en vue

En Vue 3, cuando usas el Composition API junto con <script setup>, es común definir y utilizar props y emits de la siguiente manera, siguiendo las convenciones de nomenclatura típicas de Vue:

Definición y Uso de Props y Emits

Definición de Props en Componente Hijo:
- Las propiedades (props) se definen usualmente en camelCase dentro del componente hijo.
- Se pueden declarar usando la función defineProps() en <script setup>.
- Ejemplo:
```
<script setup>
const props = defineProps({
  userFirstName: String,
  userAge: Number
});
</script>
```
Uso de Props en el Template del Hijo:
- Dentro del template del componente hijo, los props se utilizan directamente como están definidos (en camelCase).
- Ejemplo:
```
<template>
  <p>Nombre: {{ userFirstName }}</p>
  <p>Edad: {{ userAge }}</p>
</template>
```
Pasando Props desde el Componente Padre:
- Cuando se pasan props desde el componente padre, se utilizan en kebab-case en el template del padre.
- Esto se debe a la restricción de HTML de que los nombres de atributos deben estar en minúsculas.
- Ejemplo:
```
<template>
  <ChildComponent :user-first-name="John" :user-age="30" />
</template>
```
Definición de Emits en Componente Hijo:
- Los eventos emitidos (emits) también se definen comúnmente en camelCase dentro del componente hijo.
- Se pueden declarar usando defineEmits() o como parte de defineProps() en <script setup>.
- Ejemplo:
```
<script setup>
  const emit = defineEmits(['updateName', 'updateAge']);
</script>
```
Emisión de Eventos en el Hijo:
- Para emitir un evento, se utiliza la función emit() con el nombre del evento en camelCase.
- Ejemplo:
```
function handleNameChange(newName) {
  emit("updateName", newName);
}
```
Escuchando a los Emits en el Padre:
- En el componente padre, los eventos emitidos se escuchan utilizando la sintaxis de kebab-case en el template, de acuerdo a las restricciones de HTML.
- Ejemplo:
```
<template>
  <ChildComponent
    @update-name="handleNameChange"
    @update-age="handleAgeChange"
  />
</template>
```

Resumen

Usa camelCase para definir y manejar props y emits dentro de los scripts de los componentes.
Usa kebab-case para referenciar props y emits en los templates HTML tanto en los componentes padres como en los hijos. Esto se alinea con las prácticas estándar de Vue y las limitaciones del HTML.