Pass Values between components with an event

Question

this app have 2 components, the first have 2 inputs and the other have a table to show the values of a list. I want to pass the values of the inputs throught an event to the second component an insert the objects there. I can't push the code to the scratch org because of this error:

PROJECT PATH                                                 ERRORS                                         
───────────────────────────────────────────────────────────  ───────────────────────────────────────────────
force-app\main\default\aura\crearCoche\crearCoche.cmp        c:crearCoche:9,75: Invalid attribute "event"   
force-app\main\default\aura\insertarCoche\insertarCoche.cmp  c:insertarCoche:5,71: Invalid attribute "event"

THANKS!!

:::::HERE IS THE CODE:::::

MAIN APP

<aura:application>
    <c:myComponent1/>
    <c:myComponent2/>
    <c:crearCoche/>
    <aura:registerEvent name="passValueEvent" type="c:passValueEvent"/>

</aura:application> 

FIRST COMPONENT

<div class="c-container">
    <lightning:input type="number" aura:id="idCoche" label="Identificador Coche" />

    <lightning:input type="text" aura:id="nombre" label="Nombre Coche" />

    <lightning:button label="Introducir coche" onclick="{!c.crearCoche}"/>
    <aura:handler event="c:passValueEvent" action="{!c.handleEvent}"/>
    <br/>
    <br/>
</div>

**CONTROLLER **

 ({
       crearCoche : function(component, event) {
            var appEvent = $A.get("e.c:passValueEvent");
            var nombre = component.find('nombre').get("v.value");
            var id = component.find('idCoche').get("v.value");
            appevent.setParams({"cocheID": nombre},{"cocheNAME":id});
            console.log("firing event");
            appEvent.fire();


        }
    })

SECOND COMPONENT

<aura:component>
    <aura:attribute name="coches" type="List"></aura:attribute>

    <div class="c-container">
    <aura:handler event="c:passValueEvent" action="{!c.handleEvent}"/>
       <table>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
        </tr>
        <aura:iteration var="coche" items="{!c.coches}">
            <tr>
                <td>{coche.id}</td>
                <td>{coche.nombre}</td>
            </tr>

        </aura:iteration>
       </table>
    </div>
</aura:component>

CONTROLLER

({
    createCar: function(nombre, color) {
        var obj = new Object();
        obj.nombre = nombre;
        obj.color = color;
        return obj;
      },


      insertCar: function(component, event) {
        var objs = component.get('v.coches');
        var appEvent = $A.get("e.c:passValueEvent");
        var nombre = appEvent.getParam("cocheNAME");
        var id = appEvent.getParam("cocheID")
        objs.push(this.createCar(nombre,id));
        component.set('v.objs', objs);
      },


})

EVENT

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="cocheID" type="string"/>
    <aura:attribute name="cocheNAME" type="string"/>

</aura:event>

Answer 1

I'm not 100% sure this will fix your issue but there seems to be some issues with this chunk of code in your component 2 handler:

var appEvent = $A.get("e.c:passValueEvent");
var nombre = appEvent.getParam("cocheNAME");
var id = appEvent.getParam("cocheID")
objs.push(this.createCar(nombre,id));

In the handler you don't use $A.get to get the event, it is passed as a parameter so instead of var appEvent = $A.get("e.c:passValueEvent"); you should use var appEvent = event; (or use event.getParam on the following 2 lines)

The third line is missing a semi-colon.

I think <aura:registerEvent name="passValueEvent" type="c:passValueEvent"/> is supposed to be in the component that actually fires the event and not in the application. Move this into component 1. You also probably don't need a handler in component 1 unless there is code that was removed.

The best piece of advise I can give is to make sure your code more closely matches the examples here.

Answer 2

1. you don't need to register in Application level. so replace with below code

<aura:registerEvent name="passvalueappEvent" type="passValueEvent"/>

in your first component below handler

<aura:handler event="c:passValueEvent" action="{!c.handleEvent}"/>` 

remove at Application level