En Vue Props se declaran en el script del componente. Se pasan de un componente principal a un componente secundario.

Aquí hay un ejemplo de un componente secundario que acepta el valor de nombre de usuario que se pasa desde su componente principal:

 <template> <div> {{username}} </div> </template> <script> export default { props: ['username'] } </script>

Aquí está el componente principal que pasa el accesorio "nombre de usuario" usando una variable estática:

 <child-component-name username='John Smith' />

En muchos casos, el componente principal se vinculará y objetará haciéndolo dinámico. Aquí está toda la propiedad del componente principal que pasa "nombre de usuario" al niño con este ejemplo:

 <template> <div> <child-component-name :username="user.username" /> </div> </template> <script> import child-component-name from "@/components/ChildComponent.vue"; export default { components: { child-component-name }, data() { return { user: { username: 'John Smith' } } } } </script>

En su ejemplo, el componente principal se usa para contar los clics y los eventos y luego pasa los valores al componente secundario de la siguiente manera:

 <child-component-name :clicks="yourClicks" :events="yourEvents" />

En Vue, los props (o propiedades) son la forma en que pasamos datos de un componente principal a sus componentes secundarios.

Esto se usa específicamente para compartir datos de su padre inmediato al niño.

En su caso, la plantilla de su componente principal será algo así como.

 <template> <div> <child-component-name :clicks="myClickObject" :events="myEventsObject"> </child-component-name> </div> </template>

Donde myClickObject y myEventsObject son objetos definidos en su componente primario inmediato desde el cual se ha llamado child-component-name .

Los accesorios en los componentes de Vue siempre provienen del componente principal inmediato.