Child component

1. Event component

Our app will consist of two components. The main one - the App component, which will be responsible for layout and the Event component - a sub-component which will render a single event entity.

1. Create a new components folder under src/
2. Create a new Event.vue file
3. Paste the initial Event code
• Vue

<template>
  <div>
    <h3>9:00 - Title</h3>
  </div>
</template>

<script>
export default {
  name: "Event"
};
</script>

<style scoped>
</style>
      

Most of the people will simply call Event a component. This is perfectly fine, however, there is the one important thing that I want you to remember if you didn't have any experience with Object Oriented Programming in the past.

Our class is just a definition of the component. It describes how our component will look and behave but it doesn't create an instance of the component yet.

You can think of it like a stamp. A stamp itself is just a definition of a picture/image. In order to create a stamp imprint, you have to make some action. Furthermore - our single stamp (class) can create multiple copies (instances).

2. Import and render Event component

1. Open theApp.vue file
2. Import Event
• Vue (script)

<script>
import { mdbContainer, mdbRow, mdbCol } from "mdbvue";
import Event from "@/components/Event";
export default {
  name: "App",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    Event
  }
};
</script>
    

3. Render the Event component in the template part
• Vue (template)

<template>
  <mdb-container>
    <mdb-row>
      <mdb-col col="9">
        <Event/>
      </mdb-col>
      <mdb-col col="3">Right column</mdb-col>
    </mdb-row>
  </mdb-container>
</template>
    

As we mentioned before, since our Event component is a definition, we can render multiple instances of the same component.

4. Add the second instance of the Event in the left column

5. Remove the text from the right column
• Vue (template)

<template>
  <mdb-container>
    <mdb-row>
      <mdb-col col="9">
        <Event/>
        <Event/>
      </mdb-col>
      <mdb-col col="3"></mdb-col>
    </mdb-row>
  </mdb-container>
</template>
    

Now when we know how to create an instance of our Event component let's learn how to make it more dynamic and pass some data into it.