vue组件的挂载方式

vue2.0中组件之间有全局注册的组件，有组件内部注册的组件。这两种组件都可以挂载到任何一个组件上，比如有根组件如下
 

import Vue from 'vue'

Vue.component('global-component', {


    template: '
I\'m a global component 
'
})
new Vue({
    el: "#app",
    components: {
        "layout": layout
    }
})

上面

上面是我们要实现的流程图

 

1.根组件挂载全局组件和普通组件

上面注册了一个全局组件，global-component并且初始化了一个vue实例。那么如何在根组件引用global-component?

（1）.挂载全局组件。很简单把global-component放在index.html文件中

 

(2).挂载普通组件layout，vue实例加入components属性，并且定义组件layout配置项

let layout = {
    template: '
我是内部挂载的组件
',
  
}
new Vue({
    el: "#app",
//add new attributes
    components: {
        "layout": layout
    }


})

然后修改index.html

2.普通组件挂载全局组件与普通组件
例如，给刚才的layout上挂载一个普通组件child以及全局组件global-component.挂载普通组件，在内部components中注册组件child然后在模板template中引用；挂载全局组件直接模板template引用就可以

let layout = {
    template: '
我是内部挂载的组件
',
    components: {
        'child': {
            template: '我是一个普通组件内部的组件'
        }
    }
}

这样，我们就实现了组件之间的层级嵌套关系。
完整js代码示例如下

import Vue from 'vue'
let layout = {
    template: '
我是内部挂载的组件
',
    components: {
        'child': {
            template: '我是一个普通组件内部的组件'
        }
    }
}
Vue.component('global-component', {

    template: '
I\'m a global component 
'
})
new Vue({
    el: "#app",
    components: {
        "layout": layout
    }

})