Challenge 2 / 2

Suppose we have an empty component that looks like this:

<template>
    <div></div>
</template>

<script>
export default {
    name: 'MainComponent',
};
</script>

We now want to import a child component (that lives at @/components/title-component) and render it inside MainComponent. What code would accomplish this?

<template>
    <div></div>
</template>

<script>
import TitleComponent from '@/components/title-component';

export default {
    name: 'MainComponent',
    components: {
        TitleComponent,
    },
};
</script>

<template>
    <div><title-component /></div>
</template>

<script>
import TitleComponent from '@/components/title-component';

export default {
    name: 'MainComponent',
    components: {
        TitleComponent,
    },
};
</script>

<template>
    <div><title-component /></div>
</template>

<script>
import TitleComponent from '@/components/title-component';

export default {
    name: 'MainComponent',
    components: [
        TitleComponent,
    ],
};
</script>

<template>
    <div><title-component /></div>
</template>

<script>
export default {
    name: 'MainComponent',
    components: {
        TitleComponent,
    },
};
</script>

Rewatch the video