Composing with components

Components can be nested in other components in the same way that standard HTML elements can be nested. For example, component B can be a child of component A, if component A declares component B in its template:

<div id="app">
  <component-a></component-a>
</div>
<script>
  Vue.component('component-a', {
    template: `
      <div>
        <p>Hi I'm component A</p>
        <component-b></component-b>
      </div>`
  });

  Vue.component('component-b', {
    template: `<p>And I'm component B</p>`
  });

  new Vue({
    el: '#app'
  });
</script>

This renders as:

<div id="app">
  <div>
    <p>Hi I'm component A</p>
    <p>And I'm component B</p>
  </div>
</div>

Registration scope

While some components are designed for use anywhere in an app, other components may be designed with a more specific purpose. When we register a component using...