vue组件和根实例之间是什么关系？

Question

(初学Vue，可能问题问的都不对..请高手指点)

一个页面用vue的话要建立一个vue的根实例，然后一个页面还有自己写的各种组件，根实例和自己写的组件之间是什么关系呢？

例如

var MyComponent = Vue.extend({
    template: '#indexpage',

    data: function(){
        return {
            show1:true
        }
    },

    props: ['article'],

    methods:{
        init:function(){
            console.log("init");
        },
        handcroll:function(){
            console.log("scroll");
        }
    }
});
// 注册
Vue.component('page-component', MyComponent);

var vm = new Vue({
   //some code
})

上面这个自己注册的组件和根实例之间是啥关系？这个组件是根实例的子组件么?

Answer 1

推荐先看组件系统，

根实例可以看做程序的入口，即启动程序从#app开始，组件就是构成这棵树的各个节点，譬如:<app-nav></app-nav>，<app-view>...</app-view>等

形象点，就是右上角那个绿色的树状图

Answer 2

把页面看成一颗倒着的树，根实例就是根，可以理解为入口，组件们就是枝干，枝干再nice，没有根也是白搭。

Answer 3

呃 有一个好的脚手架真的很重要。。。骚年，上车吧 https://github.com/kenberkele...

Answer 4

Dom Com...树根