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

這篇文章主要介紹“Vue怎么在自定義指令綁定的處理函數(shù)中傳遞參數(shù)”，在日常操作中，相信很多人在Vue怎么在自定義指令綁定的處理函數(shù)中傳遞參數(shù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue怎么在自定義指令綁定的處理函數(shù)中傳遞參數(shù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

需求背景

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

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

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

那么當(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ù)并不會立即執(zhí)行，因?yàn)楸磉_(dá)式中只是函數(shù)的聲明，并沒有調(diào)用。利用這種形式，就可以為自定義指令綁定函數(shù)值，并可以向函數(shù)中傳遞參數(shù)。

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

Vue 從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達(dá)式作為一個(gè)指令的參數(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ù)時(shí)，handleFunc 只能接收一個(gè)參數(shù)，因?yàn)橹噶畹膮?shù)只能傳一個(gè)。

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

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

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

首先做一個(gè)簡單的案例來測試一下，在我們傳遞一個(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è)是掛載的對象，一個(gè)是用來接收參數(shù)的binding，下面我們來看看value和expression中對應(yīng)的值是什么

顯示效果：

可以看到在expression中的值是color，而在value中存儲的值是red，那么我們就可以知道，expression中存儲的是我們傳遞給指令的參數(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í)候，首先會報(bào)錯(cuò)，這個(gè)洋文報(bào)錯(cuò)的大致意思是作為參數(shù)傳遞的這個(gè)變量沒有定義就被使用了，而且在組件中沒有這個(gè)變量的其它形式的定義。

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

很簡單，當(dāng)我們想要傳遞一個(gè)字面值，而希望Vue不要以表達(dá)式的形式去解析的時(shí)候，用單引號將值包裹起來就可以作為一個(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>

顯示效果：

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

注意點(diǎn)

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

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

到此，關(guān)于“Vue怎么在自定義指令綁定的處理函數(shù)中傳遞參數(shù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！