Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)

更新時間：2023年03月10日 14:26:07 作者：June·D

這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

在自定義指令綁定的處理函數(shù)中傳遞參數(shù)

需求背景

現(xiàn)在需要為自定義指令綁定函數(shù)，并且需要向函數(shù)中傳遞參數(shù)，類似 v-on="handleFunc(arg1, arg2)"。

Vue 的指令預期得到的值是一個 JavaScript 表達式，除了 v-on 和 v-for 這兩個特殊指令外，其他的指令會自動計算該表達式的值，將最終的計算結果傳遞給指令。

所以自定義的指令不能用 v-mydirective="handleFunc(arg1, arg2)" 的形式綁定函數(shù)值，因為 handleFunc(arg1, arg2) 作為一個 JavaScript 表達式會被立即執(zhí)行，最終會將其返回值傳遞給指令。

那么當我們想要為自定義指令綁定函數(shù)值，又想為其傳遞參數(shù)該怎么辦呢?

方式一：包裝函數(shù)

利用指令的值預期得到一個 JavaScript 表達式的特性，可以為其值綁定一個包裝后的函數(shù)，從而實現(xiàn)傳遞參數(shù)的目的。如下

<div v-mydirective="() => {handleFunc(arg1, arg2)}"><div>

在上面的示例中，v- mydirective 指令的值是一個字面量的箭頭函數(shù)，該函數(shù)并不會立即執(zhí)行，因為表達式中只是函數(shù)的聲明，并沒有調(diào)用。利用這種形式，就可以為自定義指令綁定函數(shù)值，并可以向函數(shù)中傳遞參數(shù)。

方式二：利用動態(tài)參數(shù)

Vue 從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數(shù)，如下

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

利用動態(tài)參數(shù)，也可以向指令中傳遞其綁定的函數(shù)所需要的參數(shù)，如下

# template
<div v-mydirective:[funcArg]="handleFunc"><div>

# script
export default {
? ? directives: {
? ? ? ? mydirective: {
? ? ? ? ? ? bind(el, binding, vnode) {
? ? ? ? ? ? ? ? let {expression, arg} = binding;
? ? ? ? ? ? ? ? if (expression && vnode.context[expression]) {
? ? ? ? ? ? ? ? ? ? vnode.context[expression](arg);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? binding.value(arg)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? }
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? funcArg: {
? ? ? ? ? ? ? ? a: 1,
? ? ? ? ? ? ? ? b: 2,
? ? ? ? ? ? ? ? c: 3
? ? ? ? ? ? },
? ? ? ? }
? ? },
? ? methods: {
?? ? ? ?handleFunc({a, b , c}) {
?? ? ? ??? ?console.log(a, b, c);
?? ? ? ?},
? ? }
}

需要注意的是，利用動態(tài)參數(shù)時，handleFunc 只能接收一個參數(shù)，因為指令的參數(shù)只能傳一個。

如果需要接收多個參數(shù)，可以像上例一樣，傳個對象進去，然后在處理函數(shù)中采用解構語法接收參數(shù)。

在自定義指令中的傳遞參數(shù)時value和expression的區(qū)別

在使用Vue的自定義指令的時候，有時候會在調(diào)用binding的value的值的時候會發(fā)現(xiàn)值顯示未定義，但是我們確實傳遞了參數(shù)，在查看打印出來的參數(shù)的時候會發(fā)現(xiàn)參數(shù)出現(xiàn)在了expression對應的值中，而不是value，所以這時候這兩個參數(shù)的區(qū)別就很有必要探究一下

首先做一個簡單的案例來測試一下，在我們傳遞一個參數(shù)的時候，這兩個參數(shù)的具體作用和現(xiàn)實的內(nèi)容：

代碼實現(xiàn)：

<template>
<div>
  <p v-color="color">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

在上面的案例中，我們定義了一個自定義指令，指令的名字叫做color，并傳遞了一個參數(shù)，參數(shù)是Vue組件中的data節(jié)點中的變量，我們打印了兩個形參，一個是掛載的對象，一個是用來接收參數(shù)的binding，下面我們來看看value和expression中對應的值是什么

顯示效果：

可以看到在expression中的值是color，而在value中存儲的值是red，那么我們就可以知道，expression中存儲的是我們傳遞給指令的參數(shù)的原本的內(nèi)容，是一個表達式，而value中的值才是我們真正需要的，這是在傳遞了一個變量的情況，那如果我們直接傳遞一個固定的值作為參數(shù)的時候是什么樣的結果呢？

代碼實現(xiàn)：

<template>
<div>
  <p v-color="red">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

顯示效果：

可以看到，在我們傳遞了一個data節(jié)點中不存在的值的時候，首先會報錯，這個洋文報錯的大致意思是作為參數(shù)傳遞的這個變量沒有定義就被使用了，而且在組件中沒有這個變量的其它形式的定義。

意思就是我們明明傳遞了一個值，但是Vue仍然將其作為一個表達式的形式來解析了，而且可以看到expression中的值是我們傳遞進去的參數(shù)的名字，而value中卻沒有參數(shù)，就導致了我們明明傳遞了參數(shù)而value中沒有任何參數(shù)的問題，那么如果我們想要傳遞一個字面值，而不是作為表達式的形式被解析的時候需要怎么做呢？

很簡單，當我們想要傳遞一個字面值，而希望Vue不要以表達式的形式去解析的時候，用單引號將值包裹起來就可以作為一個字符串的字面值的形式進行解析了。

代碼實現(xiàn)：

<template>
<div>
  <p v-color="'red'">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

顯示效果：