Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Component Structure and Child Components with Props

Explore the structure of Vue components using TypeScript, including the template, script, and style sections. Understand how to define and use child components with props to pass data from parent to child, and see how to integrate these components within a Vue application.

We'll cover the following...

Component structure

If we explore the files and directory structure that the Vue CLI has generated for our application, we will notice three top-level directories named node_modules, public, and src.

Outside of the node_modules directory, which contains the modules required to generate the application, the public directory contains the index.html file, and all other Vue files are housed in the src directory. If we examine the src directory, we will notice a main.ts file with the following contents:

TypeScript 4.9.5
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Here, we can see that the main.ts file is importing the App class from the App.vue file and calling the createApp function with the App class as its only argument. It then calls the mount function with the string '#app', which tells Vue to mount the generated HTML from the App class to a DOM element with an id of app or <div id="app">, which can be found in the public/index.html file. Note that all Vue source files have the extension .vue.

The App.vue file contains our App component. Let’s modify the default App.vue file with the following content:

TypeScript 4.9.5
<template>
    Hello Vue !
</template>
<script lang="ts">
import { Vue } from 'vue-class-component';
export default class App extends Vue {}
</script>
<style scoped>
</style>

Here, we can see the main structure of a ...