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

需求背景

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

Vue 的指令預(yù)期得到的值是一個(gè) JavaScript 表達(dá)式，除了 v-on 和 v-for 這兩個(gè)特殊指令外，其他的指令會(huì)自動(dòng)計(jì)算該表達(dá)式的值，將最終的計(jì)算結(jié)果傳遞給指令。

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

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

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

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

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

在上面的示例中，v- mydirective 指令的值是一個(gè)字面量的箭頭函數(shù)，該函數(shù)并不會(huì)立即執(zhí)行，因?yàn)楸磉_(dá)式中只是函數(shù)的聲明，并沒(méi)有調(diào)用。利用這種形式，就可以為自定義指令綁定函數(shù)值，并可以向函數(shù)中傳遞參數(shù)。

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

Vue 從 2.6.0 開(kāi)始，可以用方括號(hào)括起來(lái)的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)，如下

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

利用動(dòng)態(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);
?? ? ? ?},
? ? }
}

需要注意的是，利用動(dòng)態(tài)參數(shù)時(shí)，handleFunc 只能接收一個(gè)參數(shù)，因?yàn)橹噶畹膮?shù)只能傳一個(gè)。

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

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

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

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

代碼實(shí)現(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>

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

顯示效果：

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

代碼實(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>

顯示效果：

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

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

很簡(jiǎn)單，當(dāng)我們想要傳遞一個(gè)字面值，而希望Vue不要以表達(dá)式的形式去解析的時(shí)候，用單引號(hào)將值包裹起來(lái)就可以作為一個(gè)字符串的字面值的形式進(jìn)行解析了。

代碼實(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>

顯示效果：

可以看到，在我們將傳遞的值用單引號(hào)進(jìn)行包含之后，報(bào)錯(cuò)消失了，并且expression中的值是我們傳遞進(jìn)去的帶有單引號(hào)的參數(shù)，在value中的參數(shù)是我們真正需要的字面值 

注意點(diǎn)

在傳遞參數(shù)的時(shí)候，如果不加單引號(hào)，Vue會(huì)將其以表達(dá)式的方式進(jìn)行解析，會(huì)進(jìn)行運(yùn)算或在data節(jié)點(diǎn)中尋找變量的值，如果沒(méi)有對(duì)應(yīng)的變量值就會(huì)報(bào)錯(cuò)，且value中沒(méi)有對(duì)應(yīng)的數(shù)據(jù)。

如果想要將參數(shù)作為普通的字符串進(jìn)行解析的時(shí)候，就需要將參數(shù)使用單引號(hào)進(jìn)行包裹，就可以作為一個(gè)普通的字符串字面值進(jìn)行解析

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論