Passing data to components

web
mobile

Author: Dawid Adach

-

Earlier, we learned how to create the Event component. The problem is, that this component won’t be useful unless you can pass data to it, such as the time, title, location and description of the specific event we want to display. That's where props come into the picture.

Passing Data to Child Components with Props

Props are custom attributes that which we can register on a component. When a value is passed to a prop attribute, it becomes a property of that particular component instance. Let's define some props:

  1. Add time, title, location and description props to the <script> part of an Event:
  2. 
    export default {
      name: "Event",
        props: {
        time: {
          type: String
        },
        title: {
          type: String
        },
        location: {
          type: String
        },
        description: {
          type: String
        }
      },
    };
        

    Now when our props are defined we can update our template. To display props we will use the Mustache syntax (double curly braces) {{}}

  3. Update an Event template:
  4. 
    <template>
      <div>
        <h3>{{time}} - {{title}}</h3>
        <p>{{location}}</p>
        <p>{{description}}</p>
      </div>
    </template>
        

    The last thing we have to do is to pass a value to the App component.

  5. Update the App.vue template part:
  6. 
    <template>
      <mdb-container>
        <mdb-row>
          <mdb-col col="9">
            <Event time="10:00" title="Breakfast with Simon" location="Lounge Caffe" description="Discuss Q3 targets"/>
            <Event time="10:30" title="Daily Standup Meeting (recurring)" location="Warsaw Spire Office"/>
          </mdb-col>
          <mdb-col col="3"></mdb-col>
        </mdb-row>
      </mdb-container>
    </template>
        

    Now we are able to dynamically generate unique instances of these events.

    App preview

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...