As we learned in Chapter 2, Basic Concepts of Vue 2, to get a new Vue instance running, we use new Vue:
new Vue( el: "#app", // the rest of the Vue instance code here )
Our app component resides inside this Vue instance.
The app component usually has a child component, like we saw in this example from Chapter 2, Basic Concepts of Vue 2: https://codepen.io/AjdinImsirovic/pen/xzpOaJ:
Vue.component('custom-article', {
template: `
<article>
Our own custom article component!
</article>`
})
new Vue({
el: '#app'
})What we did not mention in the previous chapter is this:
- A child component can be reused as many times as needed
- A child component can also have its own children
An example of this is available in the following pen: https://codepen.io/AjdinImsirovic/pen/ZjdOdK.
Here is the code which demonstrates these two principles:
// JS
Vue.component('custom-article', {
template: `
<article>
Our own...