Child component

web
mobile

Author: Dawid Adach

-

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
  4. 
    <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
  3. 
    <script>
    import { mdbContainer, mdbRow, mdbCol } from "mdbvue";
    import Event from "@/components/Event";
    export default {
      name: "App",
      components: {
        mdbContainer,
        mdbRow,
        mdbCol,
        Event
      }
    };
    </script>
        
  4. Render the Event component in the template part
  5. 
    <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.

  6. Add the second instance of the Event in the left column
  7. App preview
  8. Remove the text from the right column
  9. 
    <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.


Rate this lesson

Previous lesson Download 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...