傳統(tǒng)網(wǎng)頁一些不可避免的小問題:

1.網(wǎng)頁JS、CSS等資源依賴關(guān)系混亂,不方便維護

2.代碼復(fù)用率很低

使用組件將代碼進行復(fù)用,簡化項目結(jié)構(gòu),提高運行效率,便于維護

組件定義

組件即為實現(xiàn)應(yīng)用中局部功能代碼(css、html、js)和資源(mp3、mp4、字體資源)的集合
模塊化：當應(yīng)用中的JS都是以模塊來編寫的,那這個應(yīng)用就是一個模塊化的應(yīng)用
組件化：當應(yīng)用中的JS都是以組件來編寫的,那這個應(yīng)用就是一個組件化的應(yīng)用

傳統(tǒng)網(wǎng)頁

傳統(tǒng)網(wǎng)站如需要新建一個頁面，需要頭部、中間內(nèi)容部分、底部,每次新建頁面都得復(fù)制來一套，引用的外部樣式也是如此；如果有一處需要更改，那么所復(fù)制的每個頁面都需要更改，還有著遺漏某個隱藏極深的頁面漏改的可能。

組件

組件是獨立和可復(fù)用的代碼組織單元，組件系統(tǒng)是vue核心特性之一，它讓開發(fā)者使用小型、獨立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用，使得前端開發(fā)的過程變成搭積木的過程。

傳統(tǒng)代碼

實現(xiàn)步驟

新建一個頁面并創(chuàng)建好頁面容器及對應(yīng)的Vue實例，在data中定義三個變量如下

 data: function () {
	 return {
	       header:'頁面頭部',
	       content: '頁面內(nèi)容',
	       footer:'頁面底部'
	   };
},

在頁面中通過差值語法的方式將數(shù)據(jù)渲染展示

<div class="box">{{header}}</div>
<hr />
<div class="box">{{content}}</div>
<hr />
<div class="box">{{footer}}</div>

這樣看上去也沒有什么問題，影響貌似也不大，但是如果現(xiàn)在讓你再實現(xiàn)一個頁面，保持結(jié)構(gòu)不變的同時修改數(shù)據(jù)，那是不是只能把這段代碼復(fù)制粘貼呢?這樣就違背了組件的作用，組件是把代碼進行復(fù)用而不是復(fù)制

組件代碼

定義組件

使用Vue.extend(option)創(chuàng)建，格式與new Vue時幾乎一樣，但是這里有兩點要注意；
一是不需要寫el,因為el最終是由vm來決定的、二是data必須寫成函數(shù),這樣組件復(fù)用時互不干擾

通過template字段直接將html編寫在里面即可

const header = Vue.extend({
            template:`
                <div>
                    <span>{{header}}</span>
                </div>
            `,
            data(){
                return {
                    header:'頁面頭部'
                }
            }
        });

注冊組件

局部注冊

在new Vue中使用components選項即可實現(xiàn)組件局部注冊

// 創(chuàng)建vue實例
        const vm = new Vue({
            el: '#root',
            //2.組件注冊
            components:{
                headercom:header,
                contentcom:content,
                footercom:footer,
            }
        });

使用局部注冊時，如果頁面上有兩個容器對應(yīng)著兩個vm，那只有注冊過的vm才能使用這個組件，如果另外一個vm需要使用也需要再次注冊才能使用，但是這樣代碼又重復(fù)了，所以有了下面的全局注冊

全局注冊

全局注冊方法：使用Vue.component(‘’,‘’)，它有兩個參數(shù)，第一個是組件名，第二個組件的指向，也就是你定義好的組件

Vue.component('name',name);

使用組件

定義跟注冊好組件后即可在頁面進行使用，通過編寫組件標簽的形式即可

<headercom></headercom>
<hr />
<contentcom></contentcom>
<hr />
<footercom></footercom>

避坑

1.組件注冊時使用大小寫命名會報錯，同時組件名稱不要使用一些html標簽名稱
2.components注冊時單詞拼寫容易錯誤
3.單個vm中存在多個components

總結(jié) 

到此這篇關(guān)于Vue非單文件組件使用的文章就介紹到這了,更多相關(guān)Vue非單文件組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論