淺談Vue.js組件(二)

更新時間：2019年04月09日 11:23:53 作者：冷星1024

這篇文章主要介紹了Vue.js組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

插槽（Slot）

定義一個名child子組件，為該子組件添加內(nèi)容應(yīng)該在子組件的template中定義，直接在父組件的<child>標(biāo)簽中定義的內(nèi)容不會被渲染。

在子組件中通過加入<slot>元素占位，便能夠渲染父組件中子組件標(biāo)簽中的內(nèi)容了。

插槽內(nèi)容

任何模版代碼
HTML代碼
其他組件

插槽可以有默認(rèn)內(nèi)容，當(dāng)在父組件中沒有提供內(nèi)容的時候，來進(jìn)行顯示。

<!-- submit-button -->
<button type="submit">
 <slot>Submit</slot>
</button>


1.
<submit-button></submit-button>
⬇️ 
<button type="submit">
 Submit
</button>

2.
<submit-button>
 Save
</submit-button>
⬇️
<button type="submit">
 Save
</button>

作用域

父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。

具名插槽

試想，我們有一個帶有如下模版的<base-layout>組件

<div class="container">
 <header>
 <!-- 我們希望把頁頭放這里 -->
 </header>
 <main>
 <!-- 我們希望把主要內(nèi)容放這里 -->
 </main>
 <footer>
 <!-- 我們希望把頁腳放這里 -->
 </footer>
</div>

可以看到，在組件中顯示的內(nèi)容是劃分不同的部位的，這個時候就需要使用到<slot>元素的一個特有的屬性：name來實現(xiàn)了。這個特性可以用來定義額外的插槽。

<div class="container">
 <header>
 <slot name="header"></slot>
 </header>
 <main>
 <slot></slot>
 </main>
 <footer>
 <slot name="footer"></slot>
 </footer>
</div>

一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。

在向具名插槽提供內(nèi)容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱：

<base-layout>
 <template v-slot:header>
 <h1>Here might be a page title</h1>
 </template>

 <p>A paragraph for the main content.</p>
 <p>And another one.</p>

 <template v-slot:footer>
 <p>Here's some contact info</p>
 </template>
</base-layout>

現(xiàn)在 <template> 元素中的所有內(nèi)容都將會被傳入相應(yīng)的插槽。任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容。

當(dāng)然，也可以將默認(rèn)插槽的內(nèi)容通過v-slot:default包裹起來。

v-slot 只能添加在一個 <template> 上

作用域插槽

當(dāng)我們希望能夠讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)時，我們可以將數(shù)據(jù)作為一個<slot>元素的特性綁定上去

<span>
 <slot v-bind:user="user">
 {{ user.name }}
 </slot>
</span>

綁定在<slot>元素上的特性被稱為插槽prop。此時我們在父組件中通過給v-slot帶一個值來定義我們提供的插槽prop的名字。

<current-user>
 <template v-slot:default="slotProps">
 {{ slotProps.user.age }}
 </template>
</current-user>

獨占默認(rèn)插槽的縮寫語法

當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時，上面的寫法可以被簡化來寫

<!-- 簡化版 -->
<current-user v-slot:default="slotProps">
 {{ slotProps.user.firstName }}
</current-user>

<!-- 終極簡化版 -->
<current-user v-slot="slotProps">
 {{ slotProps.user.firstName }}
</current-user>

需要注意兩點：

簡化寫法不能和具名插槽混用，作用域不明確
出現(xiàn)多個插槽時，所有插槽都使用完整的基于<template>語法

解構(gòu)插槽Prop

作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包括在一個傳入單個參數(shù)的函數(shù)里：

function (slotProps) {
 // 插槽內(nèi)容
}

這意味著 v-slot 的值實際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JavaScript 表達(dá)式。所以在支持的環(huán)境下 (單文件組件或現(xiàn)代瀏覽器)，你也可以使用 ES2015 解構(gòu)來傳入具體的插槽 prop，如下：

<current-user v-slot:default="slotProps">
 {{ slotProps.user.firstName }}
</current-user>
⬇️
<current-user v-slot="{ user }">
 {{ user.firstName }}
</current-user>

使用場景舉例

插槽 prop 允許我們將插槽轉(zhuǎn)換為可復(fù)用的模板，這些模板可以基于輸入的 prop 渲染出不同的內(nèi)容。

這在設(shè)計封裝數(shù)據(jù)邏輯同時允許父級組件自定義部分布局的可復(fù)用組件時是最有用的。

動態(tài)插槽名

動態(tài)指令參數(shù)也可以用在 v-slot 上，來定義動態(tài)的插槽名

<base-layout>
 <template v-slot:[dynamicSlotName]>
 ...
 </template>
</base-layout>

具名插槽縮寫

v-slot可以縮寫為#。

縮寫方式只有在有參數(shù)的時候才可以使用

<!-- 這樣會觸發(fā)一個警告 -->
<current-user #="{ user }">
 {{ user.firstName }}
</current-user>

<!-- 這樣是正確的 -->
<current-user #default="{ user }">
 {{ user.firstName }}
</current-user>

動態(tài)組件&keep-alive

當(dāng)在這些組件之間切換的時候，你有時會想保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。為了解決這個問題，我們可以用一個<keep-alive>元素將動態(tài)組件包裹起來

<!-- 失活的組件將會被緩存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

注意這個 <keep-alive> 要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是局部/全局注冊。

更加詳細(xì)的說明在我們之后的實戰(zhàn)過程中遇到的話，再進(jìn)行專門解說。

異步組件

在實際的項目過程中，我們往往會將一系列的功能分割成一個個小的代碼塊，希望只有在需要的時候才去加載。為了達(dá)成這個目的，Vue允許我們以一個工廠函數(shù)的方式定義我們的組件，這個工廠函數(shù)會異步解析組件的定義。

Vue只有在這個組件需要渲染的時候才會觸發(fā)這個工廠函數(shù)，而且會把結(jié)果緩存起來供之后使用。

Vue.component('async-example', function (resolve, reject) {
 setTimeout(function () {
 // 向 `resolve` 回調(diào)傳遞組件定義
 resolve({
  template: '<div>I am async!</div>'
 })
 }, 1000)
})

其實，這個過程有些類似于我們設(shè)計一個異步函數(shù)，這個工廠函數(shù)會收到一個resolve回調(diào)，這個回調(diào)在我們從服務(wù)器獲取到組件定義的時候被調(diào)用，當(dāng)加載失敗的時候我們也可以調(diào)用reject(reason)。

一個推薦的做法是異步組件和webpack的code-splitting功能結(jié)合使用

Vue.component('async-webpack-example', function (resolve) {
 // 這個特殊的 `require` 語法將會告訴 webpack
 // 自動將你的構(gòu)建代碼切割成多個包，這些包
 // 會通過 Ajax 請求加載
 require(['./my-async-component'], resolve)
})

同樣，也可以在工廠函數(shù)中返回一個Promise

Vue.component(
 'async-webpack-example',
 // 這個 `import` 函數(shù)會返回一個 `Promise` 對象。
 () => import('./my-async-component')
)

處理加載狀態(tài)

上面的工廠函數(shù)可以返回一個下面格式的對象

const AsyncComponent = () => ({
 // 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)
 component: import('./MyComponent.vue'),
 // 異步組件加載時使用的組件
 loading: LoadingComponent,
 // 加載失敗時使用的組件
 error: ErrorComponent,
 // 展示加載時組件的延時時間。默認(rèn)值是 200 (毫秒)
 delay: 200,
 // 如果提供了超時時間且組件加載也超時了，
 // 則使用加載失敗時使用的組件。默認(rèn)值是：`Infinity`
 timeout: 3000
})

小結(jié)
本篇我們主要圍繞著Vue組件中的插槽和相關(guān)動態(tài)組件、異步組件的內(nèi)容進(jìn)行了梳理。通過這兩篇的整理，我們對于Vue組件有了一個比較整體的了解。后續(xù)我們會在實戰(zhàn)過程中針對具體的點再進(jìn)行詳細(xì)的說明。

以上所述是小編給大家介紹的Vue.js組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: