自定義指令的鉤子函數
Vue 提供了自定義指令的5個鉤子函數:
- bind:指令第一次綁定到元素時調用,只執(zhí)行一次。在這里可以進行一次性的初始化設置。
- inserted:被綁定的元素,插入到父節(jié)點DOM時被調用。
- update:綁定元素更新時調用。
- componentUpdated:綁定元素與子元素更新時調用。
- unbing:只調用一次,指令與元素解綁時調用。
鉤子函數的參數 (即 el、binding、vnode
和 oldVnode
)。
- el:指令所綁定的元素,可以用來直接操作 DOM。
- binding:一個對象,包含以下 property:
name
:指令名,不包括 v- 前綴。
value
:指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。
oldValue
:指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression
:字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。
arg
:傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"。
modifiers
:一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。
項目中 el + binding.value 就夠用了,比如網上搜的一個例子,函數節(jié)流指令:
<template>
<div>
<el-input
type="text"
v-model="text"
v-debounce="search" showClear
>
</el-input>
</div>
</template>
<script>
export default {
name: 'debounce',
data () {
return {
text: '',
count: 1
}
},
directives: {
debounce: {
inserted: function (el, binding) {
let input = el.querySelector('input')
let timer
input.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 300)
})
}
}
},
methods: {
search () {
// 實際要進行的操作 axios.get('')之類的
this.count++
console.log('count is:' + this.count)
}
}
}
</script>
本來那個input 是原生元素,想試試組件el-input支持不 結果還真支持,所以看了下組件源碼,結果這里的el只是input的父元素div!!!el-input沒有做任何操作,而且支監(jiān)聽div的keyup起到節(jié)流效果,沒有任何問題??? 一臉黑人問號。。。求大神解釋
為了安全起見 還是綁定給input了。