一、基本用法

在使用 vue-cli 創(chuàng)建的項(xiàng)目中，組件的創(chuàng)建非常方便，只需要新建一個(gè) .vue 文件，然后在 <template> 中寫(xiě)好 HTML 代碼，一個(gè)簡(jiǎn)單的組件就完成了

一個(gè)完整的組件，除了 <template> 以外，還有 <script> 和 <style>

需要注意的是，<script> 中的 data 必須是函數(shù)

然后在其他文件的 js 里面引入并注冊(cè)，就能直接使用這個(gè)組件了

二、使用 slot 分發(fā)內(nèi)容

開(kāi)發(fā)過(guò)程中，常常需要在子組件內(nèi)添加新的內(nèi)容，這時(shí)候可以在子組件內(nèi)部留一個(gè)或者多個(gè)插口 <slot>

然后在調(diào)用這個(gè)子組件的時(shí)候加入內(nèi)容

添加的內(nèi)容就會(huì)分發(fā)到對(duì)應(yīng)的 <slot> 中

<slot> 中還可以作為一個(gè)作用域，在子組件中定義變量，然后在父組件中自定義渲染的方式

這個(gè)示例中，首先在子組件中添加 <slot>，并在子組件中定義了數(shù)組變量 navs

然后在父組件中以作用域 <template> 添加內(nèi)容，其中 scope 是固有元素，它的值對(duì)應(yīng)一個(gè)臨時(shí)變量 props

而 props 將接收子組件中，所有綁定的屬性（如 text）

三、動(dòng)態(tài)組件

Vue 還可以將多個(gè)子組件，都掛載在同一個(gè)位置，通過(guò)變量來(lái)切換組件，實(shí)現(xiàn) tab 菜單這樣的效果

這樣的功能可以通過(guò)路由 vue-router 實(shí)現(xiàn)，但路由更適合較大的組件，而且 url 會(huì)有相應(yīng)的改變

Vue 自身保留的 <component> 元素，可以將組件動(dòng)態(tài)綁定到 is 特性上，從而很方便的實(shí)現(xiàn)動(dòng)態(tài)組件切換

上例中，當(dāng) tabView 的值改變，<component> 就會(huì)渲染對(duì)應(yīng)的組件，和路由的效果十分類似，但是地址欄并沒(méi)有發(fā)生改變

但這樣一來(lái)，每次切換組件都會(huì)重新渲染，無(wú)法保留組件上的數(shù)據(jù)。這時(shí)可以使用 keep-alive 將組件保留在內(nèi)存中，避免重新渲染

四、遞歸組件

當(dāng)組件擁有 name 屬性的時(shí)候，就可以在它的模板內(nèi)遞歸的調(diào)用自己，這在開(kāi)發(fā)樹(shù)形組件的時(shí)候十分有效

上面是一個(gè)子組件，定義了 name 為 simple03，然后在模板中調(diào)用自身，結(jié)合 v-for 實(shí)現(xiàn)遞歸

為了防止出現(xiàn)死循環(huán)，在調(diào)用自身的時(shí)候，加入了 v-if 作為判定條件

父組件中調(diào)用的時(shí)候，需要通過(guò) props 傳入一個(gè) tree：

最終渲染結(jié)果：

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論