目錄

1. 動(dòng)態(tài)組件

2.如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染

3. 使用keep-alive保持狀態(tài)

4.?keep-alive對(duì)應(yīng)的生命周期函數(shù)

5. keep-alive的include屬性

?自定義指令

1.什么是自定義指令

2. 自定義指令的分類

3. 私有自定義指令

4. update函數(shù)

5. 函數(shù)簡寫

?全局自定義指令：

---

1. 動(dòng)態(tài)組件

動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏。

2.如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染

vue 提供了一個(gè)內(nèi)置的 <component> 組件,專門用來實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。示例代碼如下:

data() {// 1.當(dāng)前要渲染的組件名稱return { comName: 'Left' }
}<!-- 2.通過 is 屬性，動(dòng)態(tài)指定要渲染的組件-->
<component :is="comName"></component>
<!-- 3.點(diǎn)擊按鈕，動(dòng)態(tài)切換組件的名稱-->
<button @click="comName = 'Left'">展示 Left 組件</button>
<button @click= "comName = 'Right'">展示 Right 組件</button>

is屬性指定的是誰，渲染的就是誰。

點(diǎn)擊不同的按鈕，顯示不同的組件，實(shí)現(xiàn)的是不同組件之間的來回切換

3. 使用keep-alive保持狀態(tài)

當(dāng)組件之間來回切換的時(shí)候，例如left組件和right組件，頁面最開始默認(rèn)為left組件，當(dāng)切換為right

組建的時(shí)候，left組件被銷毀，切換回left組件會(huì)創(chuàng)建一個(gè)新的left組件，相當(dāng)于重置了，那么之前的

頁面數(shù)據(jù)將會(huì)消失，那么如何保存之前的數(shù)據(jù)呢？我們就要用到keep-alive了。

? ? ? ?默認(rèn)情況下，切換動(dòng)態(tài)組件時(shí)無法保持組件的狀態(tài)。此時(shí)可以使用vue內(nèi)置的<keep-alive>組

件保持動(dòng)態(tài)組件的狀態(tài)。示例代碼如下:

// 只要是用keep-alive包裹的，用component標(biāo)簽展示出來的組件，都是會(huì)被緩存的
<keep-alive><component :is="comName"></component>
</keep-alive>

用keep-alive標(biāo)簽包裹的標(biāo)簽，不會(huì)被銷毀，只是被隱藏了，失活了。

當(dāng)我們想看到組件緩存的時(shí)候，當(dāng)緩存的時(shí)候，去做一件事，被激活的時(shí)候，再去做一件事；

這時(shí)需要用到keep-alive的生命周期函數(shù)。

4.?keep-alive對(duì)應(yīng)的生命周期函數(shù)

當(dāng)組件被緩存時(shí)，會(huì)自動(dòng)觸發(fā)組件的deactivated生命周期函數(shù)。

當(dāng)組件被激活時(shí)，會(huì)自動(dòng)觸發(fā)組件的activated生命周期函數(shù)。

activated() {console.log('組件被激活了，activated')
},
deactivated() {console.log('組件被緩存了，deactivated')
},// 以上是和data()或created()平級(jí)

5. keep-alive的include屬性

include屬性用來指定:只有名稱匹配的組件會(huì)被緩存。多個(gè)組件名之間使用英文的逗號(hào)分隔:

<keep-alive include= "MyLeft,MyRight"><component :is="comName"></component>
</keep-alive>

exclude屬性的使用：

?在使用 keep-alive 的時(shí)候，可以通過 include 指定哪些組件需要被緩存;

或者，通過 exclude 屬性指定哪些組件不需要被緩存；但是：不要同時(shí)使用 include? 和 exclude 這

兩個(gè)屬性。

?自定義指令

1.什么是自定義指令

?vue 官方提供了v-text、v-for、 v-model、 v-if 等常用的指令。除此之外 vue 還允許開發(fā)者自定義

指令。

2. 自定義指令的分類

vue 中的自定義指令分為兩類,分別是:

• 私有自定義指令
• 全局自定義指令

3. 私有自定義指令

?在每個(gè) vue 組件中，可以在 directives 節(jié)點(diǎn)下聲明私有自定義指令。示例代碼如下:

directives: {color: {// 為綁定到的 HTML 元素設(shè)置紅色的文字bind(el) { //形參中的 el 是綁定了此指令的、原生的 DOM 對(duì)象el.style.color = 'red';}}
}

給color指令傳值：

?形參obj?官方都是寫的binding，最好照官方。代碼的具體實(shí)現(xiàn)如下：

?

?注意：bind指令只在第一次綁定的時(shí)候觸發(fā)，如果后續(xù)值發(fā)生更新，將不會(huì)觸發(fā)。

4. update函數(shù)

bind 函數(shù)只調(diào)用1次:當(dāng)指令第一次綁定到元素時(shí)調(diào)用，當(dāng) DOM 更新時(shí) bind 函數(shù)不會(huì)被觸發(fā)。

update 函數(shù)會(huì)在每次DOM更新時(shí)被調(diào)用。示例代碼如下:

directives: {color: {//當(dāng)指令第一次被綁定到元素時(shí)被調(diào)用bind(el, binding) {el.style.color = binding.value},// 每次 DOM 更新時(shí)被調(diào)用update(el, binding) {el.style.color =binding.value}}
}

注意bind函數(shù)不能省略，是在第一次綁定時(shí)生效。

5. 函數(shù)簡寫

如果bind和update函數(shù)中的邏輯完全相同，則對(duì)象格式的自定義指令可以簡寫成函數(shù)格式:

directives: {// 在 insert 和 update 時(shí)，會(huì)觸發(fā)相同的業(yè)務(wù)邏輯color(el,binding) { el.style.color = binding.value}
}

?全局自定義指令：

全局共享的自定義指令需要通過"Vue.directive()" 進(jìn)行聲明，示例代碼如下:

//參數(shù)1:字符串，表示全局自定義指令的名字
//參數(shù)2:對(duì)象，用來接收指令的參數(shù)值
Vue.directive('color', function(el, binding) {el.style.color = binding.value
})