vue.js中怎樣注冊組件

小編給大家分享一下vue.js中怎樣注冊組件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

vue.js中注冊組件的方法：1、使用extend，代碼為【var com1 = Vue.extend({template:'<h4>這是第一種方式</h4>'})】；2、在頁面上定義外部template元素。

vue.js中注冊組件的方法：

第一種方式 extend:

vue.js中這樣寫：

var com1 = Vue.extend({
   template:'<h4>這是第一種方式</h4>'
});
Vue.component("myCom1",com1);

注：myCom1是采用的駝峰命名方式，所以html中這樣寫：

<my-com1></my-com1>

注：如果不采用駝峰命名方式，js和html中這樣寫：

vue.js中這樣寫：

var com1 = Vue.extend({
    template:'<h4>這是第一種方式</h4>'
});
Vue.component("mycom1",com1);

html中寫法：

<mycom1></mycom1>

上面可以不使用中間變量，即把com1的內容直接寫在Vue.component(“mycom1”,com1)里面，如：

Vue.component("mycom1",Vue.extend({
    template:'<h4>這是第一種方式</h4>'
}));

第二種方式：不用extend

vue.js中這樣寫：

Vue.component("mycom1",{
    template:'<div><h4>這是h4標簽</h4><span>這是span標簽</span></div>'
});

注：不論是哪種方式創建出來的組件，必須只有一個根元素，即多個html元素的時候，要用一個div包裹

html中依舊寫成：

<mycom1></mycom1>

第三種：在頁面上定義外部template元素

vue.js中這樣寫：

Vue.component("mycom1",{
    template:'#temp'
});

html中寫template結構：

<template id="temp">
    <h4>這是html中的temp</h4>
</template>

PS：以上是全局注冊，局部注冊如下：

第一種局部注冊：

js文件中寫：

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '<div><h4>這是局部template</h4></div>'
        }
    }
});

html文件中寫：

<div id="newBrand">
<mycom1></mycom1>
</div>

第二種局部注冊：

js文件中這樣寫：

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '#temp'
        }
    }
});

html文件中寫法：

<template id="temp">
    <div><h4>這是局部template啦</h4></div>
</template>

看完了這篇文章，相信你對vue.js中怎樣注冊組件有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！