一、認(rèn)識(shí)自定義指令

在Vue的模板語(yǔ)法中我們學(xué)習(xí)過各種各樣的指令：v-show、v-for、v-model等等，除了使用這些指令之外，Vue也允許我們來自定義自己的指令。

• 注意：在Vue中，代碼的復(fù)用和抽象主要還是通過組件；
• 通常在某些情況下，你需要對(duì)DOM元素進(jìn)行底層操作，這個(gè)時(shí)候就會(huì)用到自定義指令；

自定義指令分為兩種：

• 自定義局部指令：組件中通過 directives 選項(xiàng)，只能在當(dāng)前組件中使用；
• 自定義全局指令：app的 directive 方法，可以在任意組件中被使用；

比如我們來做一個(gè)非常簡(jiǎn)單的案例：當(dāng)某個(gè)元素掛載完成后可以自定獲取焦點(diǎn)

• 實(shí)現(xiàn)方式一：如果我們使用默認(rèn)的實(shí)現(xiàn)方式；
• 實(shí)現(xiàn)方式二：自定義一個(gè) v-focus 的局部指令；
• 實(shí)現(xiàn)方式三：自定義一個(gè) v-focus 的全局指令；

二、實(shí)現(xiàn)方式一：聚焦的默認(rèn)實(shí)現(xiàn)

三、實(shí)現(xiàn)方式二：局部自定義指令

實(shí)現(xiàn)方式二：自定義一個(gè) v-focus 的局部指令

• 這個(gè)自定義指令實(shí)現(xiàn)非常簡(jiǎn)單，我們只需要在組件選項(xiàng)中使用 directives 即可；
• 它是一個(gè)對(duì)象，在對(duì)象中編寫我們自定義指令的名稱（注意：這里不需要加v-）；
• 自定義指令有一個(gè)生命周期，是在組件掛載后調(diào)用的 mounted，我們可以在其中完成操作；
  

四、方式三：自定義全局指令

自定義一個(gè)全局的v-focus指令可以讓我們?cè)谌魏蔚胤街苯邮褂?br />

五、指令的生命周期

六、指令的參數(shù)和修飾符

如果我們指令需要接受一些參數(shù)或者修飾符應(yīng)該如何操作呢？

• info是參數(shù)的名稱；
• .aaa.bbb是修飾符的名稱；
• 后面是傳入的具體的值；

在我們的生命周期中，我們可以通過 bindings 獲取到對(duì)應(yīng)的內(nèi)容：

七、自定義指令練習(xí)

自定義指令案例：時(shí)間戳的顯示需求：

• 在開發(fā)中，大多數(shù)情況下從服務(wù)器獲取到的都是時(shí)間戳；
• 我們需要將時(shí)間戳轉(zhuǎn)換成具體格式化的時(shí)間來展示；
• 在Vue2中我們可以通過過濾器來完成；
• 在Vue3中我們可以通過 計(jì)算屬性（computed） 或者 自定義一個(gè)方法（methods） 來完成；
• 其實(shí)我們還可以通過一個(gè)自定義的指令來完成；

我們來實(shí)現(xiàn)一個(gè)可以自動(dòng)對(duì)時(shí)間格式化的指令v-format-time：

• 這里我封裝了一個(gè)函數(shù)，在首頁(yè)中我們只需要調(diào)用這個(gè)函數(shù)并且傳入app即可；
  
  
  

八、認(rèn)識(shí)Teleport

在組件化開發(fā)中，我們封裝一個(gè)組件A，在另外一個(gè)組件B中使用：那么組件A中template的元素，會(huì)被掛載到組件B中template的某個(gè)位置； 最終我們的應(yīng)用程序會(huì)形成一顆DOM樹結(jié)構(gòu)；

但是某些情況下，我們希望組件不是掛載在這個(gè)組件樹上的，可能是移動(dòng)到Vue app之外的其他位置：

• 比如移動(dòng)到body元素上，或者我們有其他的div#app之外的元素上；
• 這個(gè)時(shí)候我們就可以通過teleport來完成；

Teleport是什么呢？

• 它是一個(gè)Vue提供的內(nèi)置組件，類似于react的Portals；
• teleport翻譯過來是心靈傳輸、遠(yuǎn)距離運(yùn)輸?shù)囊馑?#xff1b;
  它有兩個(gè)屬性：
  — to：指定將其中的內(nèi)容移動(dòng)到的目標(biāo)元素，可以使用選擇器；
  — disabled：是否禁用 teleport 的功能；
  

和組件結(jié)合使用：
我們可以在 teleport 中使用組件，并且也可以給他傳入一些數(shù)據(jù)；

九、多個(gè)teleport

如果我們將多個(gè)teleport應(yīng)用到同一個(gè)目標(biāo)上（to的值相同），那么這些目標(biāo)會(huì)進(jìn)行合并：

十、認(rèn)識(shí)Vue插件

通常我們向Vue全局添加一些功能時(shí)，會(huì)采用插件的模式，它有兩種編寫方式：

• 對(duì)象類型：一個(gè)對(duì)象，但是必須包含一個(gè) install 的函數(shù)，該函數(shù)會(huì)在安裝插件時(shí)執(zhí)行；
  
  

• 函數(shù)類型：一個(gè)function，這個(gè)函數(shù)會(huì)在安裝插件時(shí)自動(dòng)執(zhí)行；

插件可以完成的功能沒有限制，比如下面的幾種都是可以的：

• 添加全局方法或者 property，通過把它們添加到 config.globalProperties 上實(shí)現(xiàn)；
• 添加全局資源：指令/過濾器/過渡等；
• 通過全局 mixin 來添加一些組件選項(xiàng)；
• 一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能；

十一、插件的編寫方式

總結(jié)

以上是生活随笔為你收集整理的Vue3 高级语法（二）—— 自定义指令、Teleport、Vue插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。