Vue学习第二天，组件注册

Vue组件注册分为全局注册和局部注册，全局注册。

Vue.component('my-li',{ template: '<div>父组件</div>' });

这里推荐使用驼峰形式的写法，上面是一个简单的全局组件，在使用new Vue挂载后就可以在全局范围内使用。

 

这里主要说如何嵌套使用，下面是一个例子

Vue.component('my-li',{ template: '<div>父组件</div>' }); 
Vue.component('my-lis',{
     template: '<div>子组件<my-li></my-li></div>' }); 
var vm = new Vue(
{ el: '#box', template: '<my-lis></my-lis>' }
);

效果图如上。

 

全局注册组件的很简单，不过工作中更多的用到的是局部组件，下面是一个个局部组件注册例子。

var a = { template: '<div>hi</div>' }; 
var vm = new Vue({
    el: '#box', 
    template: '<my-lis></my-lis>', 
    components: { 'my-lis': a, }, 
}); 

如果要在一个局部组件内部使用另外一个局部组件，需要在子组件内部定义components对象。

var a = { template: '<div>父组件</div>' };
var b = { 
    template: '<div>子组件<lik></lik></div>', 
    components: { 'lik': a, } 
}; 
var vm = new Vue({ 
    el: '#box', 
    template: '<my-lis></my-lis>', 
    components: { 'my-lis': b, }, 
});

效果

 

最后提一点，组件的注册必须在new Vue之前