Passing data to components

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:
• Vue (script)

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) {{}}

2. Update an Event template:
• Vue (template)

<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.

3. Update the App.vue template part:
• Vue (template)

<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.