vue.js中如何註冊元件

vue.js中註冊元件的方法：1、使用extend，程式碼為【var com1 = Vue.extend({template:'

這是第一種方式

' })】；2、在頁面上定義外部template元素。

本教學操作環境：windows10系統、vue2.5.2，本文適用於所有品牌的電腦。

【相關文章推薦：vue.js】

#vue.js中註冊元件的方法：

第一種方式extend:

vue.js中這樣寫：

var com1 = Vue.extend({
   template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
});
Vue.component("myCom1",com1);

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

<my-com1></my-com1>

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

vue.js中這樣寫：

var com1 = Vue.extend({
    template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
});
Vue.component("mycom1",com1);

html中寫法：

<mycom1></mycom1>

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

Vue.component("mycom1",Vue.extend({
    template:&#39;<h3 id="这是第一种方式">这是第一种方式</h3>&#39;
}));

第二種方式：不用extend

vue.js中這樣寫：

Vue.component("mycom1",{
    template:&#39;<div><h3 id="这是h-标签">这是h3标签</h3><span>这是span标签</span></div>&#39;
});

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

html中依舊寫成：

<mycom1></mycom1>

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

vue.js中這樣寫：

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

html中寫template結構：

<template id="temp">
    <h3 id="这是html中的temp">这是html中的temp</h3>
</template>

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

第一種局部註冊：

js檔案中寫：

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: &#39;<div><h3 id="这是局部template">这是局部template</h3></div>&#39;
        }
    }
});

html檔案中寫：

<mycom1></mycom1>

第二種局部註冊：

js檔案中這樣寫：

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

html檔案中寫法：

<template id="temp">
    <div><h3 id="这是局部template啦">这是局部template啦</h3></div>
</template>

相關免費學習推薦：JavaScript（影片）

#

以上是vue.js中如何註冊元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！