5.Vue2.0動態元件+插槽+自定義元件+vue專案程式碼規範
# 動態元件
動態元件，即可以動態切換顯示和隱藏的元件。
## 動態元件的使用
vue 提供了一個內建的 <component> 元件，專門用來實現動態元件的渲染。預設情況下，切換動態元件時無法保持元件的狀態（即切換了元件，再切換回來，之前的資料內容會丟失，因為之前的元件銷燬了）。此時可以使用 vue 內建的 <keep-alive> 元件保持動態組 件的狀態。示例程式碼如下:
檢視程式碼
// 保持動態元件的狀態,include是指定哪個需要保持 // 一般元件都有個 name 屬性標註元件的名稱，不標的話預設就是元件註冊的名稱 // 元件註冊的名稱的應用場景：用標籤形式使用元件 <keep-alive include="Left,Right"> // 通過 is 屬性，動態指定要渲染的元件 <component :is="comName"></component> </keep-alive> // 當前渲染的元件名稱 data(){ return { comName: 'Left' } } // 點選按鈕，動態切換要渲染的元件名稱 <button @click="comName = 'Left'">展示Left元件</button> <button @click="comName = 'Right'">展示Right元件</button>
## keep-alive 對應的生命週期函式
當元件被快取時，會自動觸發元件的 deactivated 生命週期函式。
當元件被啟用時，會自動觸發元件的 activated 生命週期函式。
# 插槽Slot
插槽(Slot)是 vue 為元件的封裝者提供的能力。允許開發者在封裝元件時，把不確定的、希望由使用者指定的 部分定義為插槽。
可以把插槽認為是元件封裝期間，為使用者預留的內容的佔位符。
在封裝元件時，可以通過 <slot> 元素定義插槽，從而為使用者預留內容佔位符。
如果在封裝元件時沒有預留任何 <slot> 插槽，則使用者提供的任何自定義內容都會被丟棄。
## 具名插槽
### 具名插槽的定義
元件中沒有設定名稱的插槽，它的預設名稱是 default 。
如果在封裝元件時需要預留多個插槽節點，則需要為每個 <slot> 插槽指定具體的 name 名稱。這種帶有具體 名稱的插槽叫做“具名插槽”。如下：
檢視程式碼
<div class="container"> <header> <slot name="header"></slot> </main> <header> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
### 為具名插槽提供內容
在向具名插槽提供內容的時候，我們需要使用 <template> 標籤對內容進行包裹，並在標籤內使用 v-slot 指令，提供需要放置的插槽名稱。v-lot 的簡寫是# 。示例程式碼如下:
檢視程式碼
<Article>
// 1 將內容放在Article元件內的 title 插槽
<template v-slot:title>
<h1>一首詩</h1>
</template>
// 2 將內容放在Article元件內的 content 插槽
<template #content>
<div>
<p>啊，大海，全是水。</p>
</div>
</template>
// 3 將Aut元件放在Article元件內的 author 插槽
<Aut #author></Aut>
</Article>## 作用域插槽
### 作用域插槽的定義
在封裝元件的過程中，可以為預留的 <slot> 插槽繫結 props 資料，這種帶有 props 資料的 <slot> 叫做“作用 域插槽”。作用域插槽和具名插槽是交集關係。示例程式碼如下:
<Tbody>
// 插槽可以帶資料（這些都是封裝元件者提供的）
<slot name="myslot" v-for="item in list" :user="item"></slot>
</Tbody>### 提取作用域插槽對外提供的資料
可以使用 v-slot: （簡寫 #）的形式，接收作用域插槽對外提供的資料:
// 用 scope 接收插槽提供的資訊
<template #content="scope">
<div>
<p>{{ scope }}</p>
</div>
</template>如果作用域插槽對外提供的是 資料物件，可以使用解構賦值簡化資料的接收過程:
<template #content="{ user }">
<div>
// user: { name: 'zs', age: 10 }
<p>{{ user.name }}</p>
<p>{{ user.age }}</p>
</div>
</template>提醒：利用插槽方式插入元件傳遞資料，比內嵌元件傳遞資料要方便得多！！！
# 自定義指令
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 還允許開發者自定義指令。
vue 中的自定義指令分為兩類，分別是:
- 私有自定義指令（少用）
- 全域性自定義指令（常用）
## 私有自定義指令及其使用
在每個 vue 元件中，可以在 directives 節點下宣告私有自定義指令。簡單的宣告及使用:
檢視程式碼
<template>
<div class="app-container">
// 使用自定義指令形式與內建的指令相似，也是： v-指令名稱
<p v-color>測試</p>
</template>
<script>
export default {
// 私有自定義指令的節點
directives: {
// 定義名為 color 的指令，指向一個配置物件
color: {
// 形參中的 el 表示當前指令所繫結到的那個 DOM 物件
bind(el) {
el.style.color = blue
}
}
}
</script>在 template 結構中使用自定義指令時，可以通過等號(=)的方式，為當前指令動態繫結引數值。
同時，在宣告自定義指令時，可以通過形參中的第二個引數（官方推薦使用 binding ），來接收指令的引數值。如下：
檢視程式碼
<template>
<div class="app-container">
<p v-color="'red'">測試</p>
</template>
<script>
directives: {
color: {
// 用 binding 作為第二個形參，接收指令傳的引數
bind(el, binding) {
// binding.value 即指令傳過來的 'red'
el.style.color = binding.value
}
}
}
</script>bind 函式只調用 1 次:當指令第一次繫結到元素時呼叫，當 DOM 更新時 bind 函式不會被觸發。
update 函式：會在每次 DOM 更新時被呼叫。因此往往需要這兩個函式配合使用。示例如下:
檢視程式碼
<template>
<div class="app-container">
<p v-color="'red'">測試</p>
</template>
<script>
directives: {
color: {
// 當指令第一次被繫結到元素上的時候，會立即觸發 bind 函式
bind(el, binding) {
el.style.color = binding.value
},
// 在 DOM 更新的時候，比如通過按鈕切換指令的引數時，會觸發 update 函式
update(el, binding) {
el.style.color = binding.value
}
}
// 注：假如函式裡面的業務邏輯相同，則可以合併在一起寫，如下
color(el, binding) {
el.style.color = binding.value
}
}
}
</script>## 全域性自定義指令
全域性共享的自定義指令需要通過在 main.js 檔案中，用 “Vue.directive()” 進行宣告，示例程式碼如下:
檢視程式碼
// 全域性自定義指令
/* Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
}) */
// 函式合併簡寫
Vue.directive('color', function(el, binding) {
el.style.color = binding.value
})
# Vue專案程式碼規範
在使用 vue-cli 安裝Vue專案的時候，如果選擇了 程式碼約束 選項，專案中則會多出一個程式碼規範的配置檔案，用來定義 程式碼規範 約束格式的。另外，可以裝外掛來格式化程式碼從而實現自定義的程式碼規範。
TSLint外掛：用來實現儲存即自動格式化程式碼的。
Prettier-Code formatter：格式化外掛。
上面兩個外掛安裝後都需要配置！