您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue的自定義指令怎么使用的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Vue的自定義指令怎么使用文章都會有所收獲,下面我們一起來看看吧。
除了 Vue 內(nèi)置的一系列指令 (比如 v-model
或 v-show
) 之外,Vue 還允許你注冊自定義的指令 (Custom Directives)。
我們已經(jīng)介紹了兩種在 Vue 中重用代碼的方式:組件和組合式函數(shù)。組件是主要的構(gòu)建模塊,而組合式函數(shù)則側(cè)重于有狀態(tài)的邏輯。另一方面,自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問的邏輯。
一個(gè)自定義指令由一個(gè)包含類似組件生命周期鉤子的對象來定義。鉤子函數(shù)會接收到指令所綁定元素作為其參數(shù)。下面是一個(gè)自定義指令的例子,當(dāng)一個(gè) input 元素被 Vue 插入到 DOM 中后,它會被自動聚焦:
const focus = { mounted: (el) => el.focus() } export default { directives: { // 在模板中啟用 v-focus focus } }
<input v-focus />
假設(shè)你還未點(diǎn)擊頁面中的其他地方,那么上面這個(gè) input 元素應(yīng)該會被自動聚焦。該指令比 autofocus
attribute 更有用,因?yàn)樗粌H僅可以在頁面加載完成后生效,還可以在 Vue 動態(tài)插入元素后生效。
和組件類似,自定義指令在模板中使用前必須先注冊。在上面的例子中,我們使用 directives
選項(xiàng)完成了指令的局部注冊。
將一個(gè)自定義指令全局注冊到應(yīng)用層級也是一種常見的做法:
const app = createApp({}) // 使 v-focus 在所有組件中都可用 app.directive('focus', { /* ... */ })
TIP
只有當(dāng)所需功能只能通過直接的 DOM 操作來實(shí)現(xiàn)時(shí),才應(yīng)該使用自定義指令。其他情況下應(yīng)該盡可能地使用
v-bind
這樣的內(nèi)置指令來聲明式地使用模板,這樣更高效,也對服務(wù)端渲染更友好。
一個(gè)指令的定義對象可以提供幾種鉤子函數(shù) (都是可選的):
const myDirective = { // 在綁定元素的 attribute 前 // 或事件監(jiān)聽器應(yīng)用前調(diào)用 created(el, binding, vnode, prevVnode) { // 下面會介紹各個(gè)參數(shù)的細(xì)節(jié) }, // 在元素被插入到 DOM 前調(diào)用 beforeMount(el, binding, vnode, prevVnode) {}, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用 mounted(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件更新前調(diào)用 beforeUpdate(el, binding, vnode, prevVnode) {}, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用 updated(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件卸載前調(diào)用 beforeUnmount(el, binding, vnode, prevVnode) {}, // 綁定元素的父組件卸載后調(diào)用 unmounted(el, binding, vnode, prevVnode) {} }
指令的鉤子會傳遞以下幾種參數(shù):
el:指令綁定到的元素。這可以用于直接操作 DOM。
binding:一個(gè)對象,包含以下屬性。
value:傳遞給指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。
oldValue:之前的值,僅在 beforeUpdate 和 updated 中可用。無論值是否更改,它都可用。
arg:傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中,參數(shù)是 "foo"。
modifiers:一個(gè)包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar 中,修飾符對象是 { foo: true, bar: true }。
instance:使用該指令的組件實(shí)例。
dir:指令的定義對象。
vnode:代表綁定元素的底層 VNode。
prevNode:之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。
舉例來說,像下面這樣使用指令:
<div v-example:foo.bar="baz">
binding
參數(shù)會是一個(gè)這樣的對象:
{ arg: 'foo', modifiers: { bar: true }, value: /* `baz` 的值 */, oldValue: /* 上一次更新時(shí) `baz` 的值 */ }
和內(nèi)置指令類似,自定義指令的參數(shù)也可以是動態(tài)的。舉例來說:
<div v-example:[arg]="value"></div>
這里指令的參數(shù)會基于組件的 arg
數(shù)據(jù)屬性響應(yīng)式地更新。
Note
除了
el
外,其他參數(shù)都是只讀的,不要更改它們。若你需要在不同的鉤子間共享信息,推薦通過元素的 dataset attribute 實(shí)現(xiàn)。
對于自定義指令來說,一個(gè)很常見的情況是僅僅需要在 mounted
和 updated
上實(shí)現(xiàn)相同的行為,除此之外并不需要其他鉤子。這種情況下我們可以直接用一個(gè)函數(shù)來定義指令,如下所示:
<div v-color="color"></div>
app.directive('color', (el, binding) => { // 這會在 `mounted` 和 `updated` 時(shí)都調(diào)用 el.style.color = binding.value })
如果你的指令需要多個(gè)值,你可以向它傳遞一個(gè) JavaScript 對象字面量。別忘了,指令也可以接收任何合法的 JavaScript 表達(dá)式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })
當(dāng)在組件上使用自定義指令時(shí),它會始終應(yīng)用于組件的根節(jié)點(diǎn),和 透傳 attributes類似。
<MyComponent v-demo="test" />
<!-- MyComponent 的模板 --> <div> <!-- v-demo 指令會被應(yīng)用在此處 --> <span>My component content</span> </div>
需要注意的是組件可能含有多個(gè)根節(jié)點(diǎn)。當(dāng)應(yīng)用到一個(gè)多根組件時(shí),指令將會被忽略且拋出一個(gè)警告。和 attribute 不同,指令不能通過 v-bind="$attrs"
來傳遞給一個(gè)不同的元素。總的來說,不推薦在組件上使用自定義指令。
關(guān)于“Vue的自定義指令怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“Vue的自定義指令怎么使用”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。