The nice thing about components is that we can reuse them, mix and match, and we can create components that build on top of other components.
For example, a Form component might use an Input component, a CheckBox component, a Label component and so on.
In a Blog application, you might have a Sidebar component which includes a PostList component, and a Search component.
When a component wants to use another component, it must first import it using:
import Search from './Search'
the location depends on how you organized the files in the project directory. If the component lives in the same folder, ./
works. Otherwise, you might need to navigate the filesystem using ../../folder/Input
.
Once you import it, you need to add it to the components
property of the Component, so that it’s available for use inside the template.
In a Single File Component, here’s what you would do:
<script>
import Search from './Search'
export default {
name: 'Sidebar',
components: {
Search
}
}
</script>
Now you can reference the component in the template:
<template>
<h2>Sidebar</h2>
<Search />
</template>
<script>
import Search from './Search'
export default {
name: 'Sidebar',
components: {
Search
}
}
</script>