vue3.0自定義指令(drectives)知識點總結
在大多數情況下,你都可以操作資料來修改檢視,或者反之。但是還是避免不了偶爾要操作原生 DOM,這時候,你就能用到自定義指令。
舉個例子,你想讓頁面的文字框自動聚焦,在沒有學習自定義指令的時候,我們可能會這麼做。
const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); },template: `<input type="text" ref="input" />`,});
在mounted鉤子函式裡,通過 $refs 獲取需要聚焦的 DOM 元素,然後呼叫 focus 方法完成自動聚焦的功能。
基本使用
上面做法已經實現了我們需要的功能,但是假如說我們有多個元件都需要這個功能,那我們只能把這段程式碼複製過去,重新實現邏輯。我們下面看下如果使用自定義指令,應該怎麼做。
const app = Vue.createApp({ // 通過 v-[自定義指令名稱] 繫結自定義指令 template: `<input type="text" v-focus/>`,}); // 註冊一個全域性自定義指令 app.directive('focus',{ // 當被繫結的元素插入到DOM的時候執行.. mounted(el){ el.focus(); } })
如上,我們定義了一個全域性自定義指令 focus,並通過 v-focus 繫結到需要聚焦的 input 元素上。如果,其他元件或模組也需要聚焦功能,只要簡單的繫結此指令即可。
自定義指令的鉤子函式
我們在上面定義指令的時候,會發現其中包含了 mounted 鉤子函式,指令還提供瞭如下鉤子函式,我們用程式碼的形式來給大家列出來。
app.directive('directiveName',{ // 指令繫結元素掛載前 beforeMount(el) {},// 指令繫結元素掛載後 mounted(el,binding) {},// 指令繫結元素因為資料修改觸發修改前 beforeUpdate(el) {},// 指令繫結元素因為資料修改觸發修改後 updated(el) {},// 指令繫結元素銷燬前 beforeUnmount(el) {},// 指令繫結元素銷燬後 unmounted(el) {},});
效果就不一一列舉了,有興趣大家可以嘗試下分別觸發這些鉤子函式。指令鉤子函式大部分與元件很類似,大家可以對比著來看。
動態指令引數
下面,我們再來看一個例子。
const app = Vue.createApp({ template: `<div class="box" v-abs-top="num" style="position:absolute;" ></div>`,}); // 在很多時候,你可能想在 mounted 和 updated 時觸發相同行為,而不關心其它的鉤子,就這樣寫 app.directive('absTop',(el) => { el.style[binding.arg] = '100px'; });
我們在 div 元素上繫結 absTop 指令,div 元素本身定位是 absolute,指令執行讓繫結元素的 top 為 100px。這時候,我想在繫結指令的時候能夠傳一個引數,使得元素的 top 值可以根據引數來改變。程式碼如下:
const app = Vue.createApp({ data() { return { num: 100 } },template: `<div class="box" v-abs-top="num"></div>`,}); app.directive('absTop',(el,binding) => { el.style.top = binding.value + 'px'; });
元素可以通過 v-directive="value" 傳入動態引數,指令通過鉤子函式的第二個引數 binding.value 來接收引數。
如果其他元素可能不是修改 top 的值,有可能是 left、right 或者 bottom,那麼指令可以動態指定嗎?其實也是可以做到的。首先,我們修改模板為:
<div class="box" v-abs:left="num"></div>
然後修改指令本身
app.directive('absTop',binding) => { el.style[binding.arg] = binding.value + 'px'; });
在 v-mydirective:[argument]="value" ,arguments 也是可以動態改變的,這樣,就可以完美的實現上述要求了。
元件的使用
元件中繫結指令與 DOM元素繫結指令並沒有什麼不同,指令會獲取元件的原生 根DOM 來操作。但是要注意的是,在 vue3.0 中,元件可能有多個根節點,指令繫結在多根節點元件是有問題的。
區域性自定義指令
最後,再來簡單說下區域性自定義指令是怎麼定義的。
const app = Vue.createApp({ directives: { focus: { // 指令的定義 mounted(el) { el.focus() } } } }
區域性指令定義和全域性指令基本一致,如上所示,在元件中定義 directives 就可以了。
總結
自定義指令可以提取出原生DOM操作的邏輯。所以指令的應用範圍主要表現在,當一些操作涉及到 DOM 底層時,而且操作邏輯可能用於多處地方,就適合用指令來封裝這些邏輯。
到此這篇關於vue3.0自定義指令(drectives)知識點總結的文章就介紹到這了,更多相關vue3.0中drectives詳解內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!