一、認識自定義指令

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

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

自定義指令分為兩種：

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

比如我們來做一個非常簡單的案例：當某個元素掛載完成后可以自定獲取焦點

• 實現方式一：如果我們使用默認的實現方式；
• 實現方式二：自定義一個 v-focus 的局部指令；
• 實現方式三：自定義一個 v-focus 的全局指令；

二、實現方式一：聚焦的默認實現

三、實現方式二：局部自定義指令

實現方式二：自定義一個 v-focus 的局部指令

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

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

自定義一個全局的v-focus指令可以讓我們在任何地方直接使用

五、指令的生命周期

六、指令的參數和修飾符

如果我們指令需要接受一些參數或者修飾符應該如何操作呢？

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

在我們的生命周期中，我們可以通過 bindings 獲取到對應的內容：

七、自定義指令練習

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

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

我們來實現一個可以自動對時間格式化的指令v-format-time：

• 這里我封裝了一個函數，在首頁中我們只需要調用這個函數并且傳入app即可；
  
  
  

八、認識Teleport

在組件化開發中，我們封裝一個組件A，在另外一個組件B中使用：那么組件A中template的元素，會被掛載到組件B中template的某個位置； 最終我們的應用程序會形成一顆DOM樹結構；

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

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

Teleport是什么呢？

• 它是一個Vue提供的內置組件，類似于react的Portals；
• teleport翻譯過來是心靈傳輸、遠距離運輸的意思；
  它有兩個屬性：
  — to：指定將其中的內容移動到的目標元素，可以使用選擇器；
  — disabled：是否禁用 teleport 的功能；
  

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

九、多個teleport

如果我們將多個teleport應用到同一個目標上（to的值相同），那么這些目標會進行合并：

十、認識Vue插件

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

• 對象類型：一個對象，但是必須包含一個 install 的函數，該函數會在安裝插件時執行；
  
  

• 函數類型：一個function，這個函數會在安裝插件時自動執行；

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

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

十一、插件的編寫方式

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。