快捷導(dǎo)航

Vue非單文件組件使用詳解

更新時(shí)間：2023年06月05日 15:34:57 作者：摔跤貓子

Vue單文件組件通常使用.vue文件擴(kuò)展名,下面這篇文章主要給大家介紹了關(guān)于Vue非單文件組件使用的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

組件定義

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

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

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

組件

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

傳統(tǒng)代碼

實(shí)現(xiàn)步驟

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

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

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

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

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

組件代碼

定義組件

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

通過(guò)template字段直接將html編寫(xiě)在里面即可

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

注冊(cè)組件

局部注冊(cè)

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

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

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

全局注冊(cè)

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

Vue.component('name',name);

使用組件

定義跟注冊(cè)好組件后即可在頁(yè)面進(jìn)行使用，通過(guò)編寫(xiě)組件標(biāo)簽的形式即可

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

避坑

1.組件注冊(cè)時(shí)使用大小寫(xiě)命名會(huì)報(bào)錯(cuò)，同時(shí)組件名稱(chēng)不要使用一些html標(biāo)簽名稱(chēng)
2.components注冊(cè)時(shí)單詞拼寫(xiě)容易錯(cuò)誤
3.單個(gè)vm中存在多個(gè)components