What is the relationship between vue components and root instances?

  node.js, question

(Beginners Vue, may not ask the right questions .. Please master advice)

A page uses vue to create a root instance of vue, and then a page has various components written by itself. what is the relationship between the root instance and the components written by itself?

For example

var MyComponent = Vue.extend({
 template: '#indexpage',
 
 data: function(){
 return {
 show1:true
 bracket
 },
 
 props: ['article'],
 
 methods:{
 init:function(){
 console.log("init");
 },
 handcroll:function(){
 console.log("scroll");
 bracket
 bracket
 });
 //register
 Vue.component('page-component', MyComponent);
 
 var vm = new Vue({
 //some code
 })

What is the relationship between the above self-registered component and the root instance? Is this component a subcomponent of the root instance?

It is recommended to read first.Component system,

Image

The root instance can be seen as the entry to the program, i.e. starting the program from#appAt first, components are the nodes that make up this tree, such as:<app-nav></app-nav>,<app-view>...</app-view>Wait

The image point is the green tree in the upper right corner.