Components are single, self-contained, and reusable Vue instances with a custom name. We define components by using the Vue component method. For example, if we want to define a component called post-item, we would do this:
Vue.component('post-item', {
data () {
return { text: 'Hello World!' }
},
template: '<p>{{ text }}</p>'
})
After doing this, we can use this component as <post-item> inside the HTML document when the root Vue instance is created with the new statement, as follows:
<div id="post">
<post-item></post-item>
</div>
<script type="text/javascript">
Vue.component('post-item', { ... }
new Vue({ el: '#post' })
</script>
All components are essentially Vue instances. This means they possess the same options (data, computed, watch, methods, and so on) as new Vue, except a few root-specific options such as el. Also, components...
