# 進階 API 1. 可以使用 ref 直接操作元件資料 2\. 先創建 bootstrap 實體，使用 ref 操控 modal ，將實體存到 data 裡的 bsModal，再用方法 show 將其開啟 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548510365/f37addc0-c4b3-4767-b236-7ab52ae6f648.png) 3\. teleport ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548512584/b183a324-b0c8-4337-bc25-c58219ffd4bb.png) 4\. 如果 html 是在 js 後面生成的，那就沒辦法用 teleport 到還沒生成的 html 裡 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548514305/7400f933-0112-478c-b93c-afca1f8cc7dc.png) 5\. teleport 實用技巧（取代標題、多個） ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548516223/6497d1f9-00a6-4606-be3d-3e76c9620f4b.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548517867/7ce87b1f-836f-44a9-ba40-2120a7c5df59.png) 6\. provide (中間如果沒有用 inject 接住，是拿不到資料的) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548519478/04706ab9-8ea8-4c06-b06b-5b5fcb1db15c.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548521029/92ce4763-db1b-459e-81ae-2f43735e5551.png) 7\. 如果更改 inject 來的東西，只有接資料的內層元件資料會被更改(沒有響應式) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548522844/343b9c57-0574-4455-b194-645b08e0cc24.png) 8\. 如果要響應式，provide 要改成 function return 的方式(實戰中使用此方法佳) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548524411/2dddb8be-c34a-4cbf-a8dc-f885270cecfd.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548525736/7a2f7a1e-0b4c-4001-a4bf-dfe59f7c84df.png) 9\. 製作包含 v-model 的元件 9.1 先將值傳進來，並用 v-model 進行雙向綁定 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548527457/fddd52bc-8969-426a-aef9-1501b5d973cc.png) 9.2 將值寫到 input ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548529212/ac06566a-9fac-4d76-a746-88909859b215.png) 9.3 利用 emit 將更改的值傳到外層 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548531350/66fa3147-76c6-451e-886e-b34b7801e259.png) 10\. 多個 v-model ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548532969/4c959e96-6005-474a-a2ff-8340753bef4f.png) 11\. mixins * 可以重複混合 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548535080/21badb73-7b21-4bf0-9052-90cefd10de1f.png) * 生命週期可以重複觸發 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548536454/ceaa3403-620a-4eab-95fb-b57a0ce4dffa.png) * mixins 同名的變數、方法則會被後者覆蓋(但元件本身的是最大的) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548538048/e729ed78-f90f-40f1-b980-deb43f8e0e73.png) 12\. Extend * 展為單一擴展(沒有辦法 extend 多個元件) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548539962/aedce807-2100-4a39-b240-322eb0e05af3.png) * 生命週期可以與 mixins 重複觸發(順序： extend > mixins > 元件) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548541547/1b6da5e6-2ecd-4ac3-a5e3-837c3c865c69.png) * 權重：元件屬性 > mixins > extend * 同名的變數、方法則會依據權重決定 13\. 自訂義指令 13.1 註冊指令 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548543193/6d45e4ff-94eb-49aa-9ae1-de82ee0012e8.png) 13.2 el 是指元件本身，binding 是外部的值 利用 binding.value 取得值 form-control ，再用 el.className 加上 class ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548545186/da9aa853-709d-438d-ba5d-b6e92dcbdf24.png) 13.3 取得 v-model 的名稱 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548547245/f29563c4-730d-48cd-9082-557b7582bdf4.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548550002/911bef27-a846-4746-a1d1-5d6e5c6945f4.png) 13.4 取得 v-model 的值 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548551513/0d3e8405-7655-46f4-9e11-516cbfbf7095.png) 13.5 驗證 email 格式，來判斷要給予哪種 class ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548553135/e8d4ff01-b180-4017-aaf4-a429b087e269.png) 14\. plugins VeeValidate 14.1 CDN 載入 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548555398/2677ef05-8bd1-4023-a8c3-e301264e0958.png) 14.2 加上 V 避免與原始的 html form 標籤搞混 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548556796/d5993cd3-0372-4489-8b00-11c13e7d9d30.png) 14.3 使用元件 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548558140/8632005a-48d2-4aca-b26c-e21b9d09c6d6.png) 14.4 用 v-slot 把錯誤訊息提取出來 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548560144/9cf30568-8f5a-411f-a01d-66b607171988.png) 14.5 建立驗證規則 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548562367/21fb01c2-892a-4205-9008-36fdc1079821.png) 14.6 沒填寫，顯示錯誤訊息 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548564122/2ce9ae4e-f790-47d4-927c-99ea71243cf5.png) 14.7 更改 name ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548566164/ad3f30b4-8320-42df-b336-76bdf1cb13be.png) 14.8 ErrorMessage ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548567770/e48025cb-71bb-4b17-aa4a-0819244ed14e.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548569523/260a16fb-bb5d-4e4d-99fa-a649e4b9af69.png) 14.9 submit 時會強制驗證 14.10 submit 把值帶出 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548570829/62328d98-7607-4b00-a874-84a158113e4e.png) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678548572474/f36817ff-1ee7-4ec8-ac6f-e36d8446846e.png) 15\. 表單驗證套件 [**HackMD - Collaborative Markdown Knowledge Base** *Edit description*hackmd.io](https://hackmd.io/FFv0a5cBToOATP7uI5COMQ "https://hackmd.io/FFv0a5cBToOATP7uI5COMQ")[](https://hackmd.io/FFv0a5cBToOATP7uI5COMQ)