Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a props option:
```js
Vue.component('feature-card', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
```
A component can have as many props as you’d like and by default, any value can be passed to any prop. In the template above, you’ll see that we can access this value on the component instance, just like with data.
Once a prop is registered, you can pass data to it as a custom attribute, like this:
```html
<blog-posttitle="My journey with Vue"></blog-post>
Instead of declaring many components in a single file resulting in a long spagetti code. You may want to modularize your components by having different files. (ie. more info: https://vuejs.org/v2/guide/single-file-components.html)
Enclose your template in a <template> tag, script the structure of the component in the <script>tagandstyleyourcomponentsinthe<stylescoped>tag.