vue自定義指令,包裝函數節(jié)流。

自定義指令的鉤子函數

Vue 提供了自定義指令的5個鉤子函數:

  • bind:指令第一次綁定到元素時調用,只執(zhí)行一次。在這里可以進行一次性的初始化設置。
  • inserted:被綁定的元素,插入到父節(jié)點DOM時被調用。
  • update:綁定元素更新時調用。
  • componentUpdated:綁定元素與子元素更新時調用。
  • unbing:只調用一次,指令與元素解綁時調用。

鉤子函數的參數 (即 el、binding、vnodeoldVnode)。

  • 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了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。