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之前

轉載于:https://www.cnblogs.com/boses/p/9627473.html