Vue的元件化

2022-07-11 02:33:11 字數 3127 閱讀 4224

元件化是vue的精髓,vue就是由乙個乙個的元件構成的。vue的元件化設計到的內容又非常多,當在面試時,被問到:談一下你對vue元件化的理解。這時候又有可能無從下手,因此在這裡闡釋一下個人對vue的元件化的理解。

一般來說,元件大致可以分為三類:

頁面級別的元件。

業務上可復用的基礎元件。

與業務無關的獨立元件。

頁面級別的元件

pages

├─ about.vue

└─ home.vue

業務上可復用的基礎元件

這一類元件通常是在業務中被各個頁面復用的元件,這一類元件通常都寫到components目錄下,然後通過import在各個頁面中使用。這一類元件通常是實現某個功能,比如外賣中各個頁面都會使用到的評分系統。這個部分就可以實現評分功能,可以寫成乙個獨立的業務元件。比如下面的components中的star.vue就是乙個業務元件。這一類元件的編寫通常涉及到元件常用的props,slot和自定義事件等。

components

└─ star.vue

與業務無關的獨立元件

這一類元件通常是與業務功能無關的獨立元件。這類元件通常是作為基礎元件,在各個業務元件或者頁面元件中被使用。目前市面上比較流行的elementui和iview等中包含的元件都是獨立元件。如果是自己定義的獨立元件,比如富文字編輯器等,通常寫在utils目錄中。

說完了元件的分類,接下來我們談一談元件的編寫。要寫好乙個元件,我們需要考慮哪些因素。首先乙個元件最重要的兩個一定是資料事件。另外,元件開發要考慮可擴充套件性,在vue中組價你的擴充套件通過slot來實現。

資料主要是指:dataprop。其中data主要是用於元件內部的資料展示,通常是乙個函式。而prop是接收外部資料,涉及到資料的校驗,資料的擴充套件等,是非常重要的乙個api。

事件:元件的事件(event)不同於在普通元素身上繫結事件。元件事件應該如何觸發,是在父元件中觸發還是在元件內部元素身上觸發。

slot:主要用於元件的擴充套件。同樣是元件開發非常重要的api。

綜上所述:元件開發中有三個非常重要的api,可以戲稱為元件開發三要素:prop,eventslot。接下來我們將從元件開發的角度來分別講述這三個api的使用。並不僅僅是簡單的使用。

屬性prop

prop定義了元件可以接收哪些可配置的屬性。主要是用來接收父元件傳遞的資料。props接收屬性時可以是陣列形式,也可以是物件形式。如果不涉及到型別校驗或者其他校驗可以直接使用陣列形式,如果涉及到校驗最好使用物件形式。

陣列形式:

props:['name','age']

物件形式:使用物件的形式,可以對資料的型別,是否必填,以及其他特徵進行校驗。這對於元件化開發非常有利。

child.vue定義元件

class="container">

姓名:}

年齡:}

點選button>

div>

template>

export default ,

age:,

type:}}}

script>

parent.vue使用元件

child>

定義元件時,name是string型別且是必填的,age是number型別非必填的。type是必須是success,warning和primary中的某乙個。

自定義事件

如何觸發元件上定義的事件:

假設現在我們需要給我們定義的child元件新增點選事件:這時候我們一般是通過在元件內部的button上通過$emit

觸發事件,然後在父元件中監聽。

在元件中通過$emit定義事件:

child.vue

姓名:}

年齡:}

點選button>

div>

template>

parent.vue監聽事件

child>

slot

我們定義的元件通常會被用到各個地方,但是並不一定能夠滿足所有的使用場景,有時候我們需要

進行一些功能的擴充套件。這時候就需要用到slot了。一句話描述slot:就是用來在元件中插入新的內容

比如我們剛剛定義的child元件,需要插入一段話。那麼這時候就需要用到slot了。

child.vue中使用slot

姓名:}

年齡:}

點選button>

slot>

div>

template>

parent.vue中擴充套件功能。插入一段話:

這是通過slot插入的一段話div>

child>

div>

template>

如上所示:在child.vue中使用了slot,在parent.vue中使用child時,插入了一段話。

實現了功能的擴充套件。當然如果需要擴充套件更多的功能可以使用具名插槽,這裡就不具體介紹了。

廣州品牌設計公司

元件的分類:

頁面級元件

業務上可復用的基礎元件

與業務無關的獨立功能元件

元件開發三要素

prop,自定義事件,slot是組成元件的三個重要因素。

prop用於定義元件的屬性。

自定義事件用於觸發元件的事件。

slot用於元件功能的擴充套件。

通過合理的使用這三個api,可以更好地幫助我們開發元件。

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法,隨著當今前端開發的複雜度更加,這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...

vue元件化的應用

前言 vue元件化的應用涉及到vue cli的內容,所以在應用之前是需要安裝node和vue cli的,具體如何安裝我就不一一贅述了。可能一會兒我心情好的時候,可以去整理一下。1 應用的內容 在乙個頁面中,需要乙個固定的內容,這個內容可以多次引用,那麼就可以考慮把他分離出來,在下次需要的時候,實現引...

Vue 元件化(二)

元件使用分為三個步驟 1.建立元件構造器物件 呼叫vue.extend 方法建立元件構造器 2.註冊元件 呼叫vue.component 方法註冊元件 3.使用元件 在vue例項的作用範圍內使用元件 使用例項 1.建立 const mycomponent vue.extend 2.註冊 全域性元件 ...