Vue自定義指令傳參

1. 用途

雖然Vue的本身思想是不想讓用戶操作DOM，但是考慮到特殊情況，肯定存在不得不操作DOM的情況，所以可以用到自定義指令。
常用示例如下

<template>
  <div>
      <div v-drag>自定義指令</div>
  </div>
</template>

<script>
export default {
  data(){},
  methods: {},
  directives: {
    drag: function(el) {}, // 示例1
    drag(el) {} // 示例2
  }
}
</script>

2. 傳參

有時候光是dom操作無法滿足需求，我們業務場景可能需要向自定義指令里面傳值，或者里面的值傳出來影響或改變data里的值，於是需要用到binding,可以通過set使內部的值傳出，可以利用對象，傳外部的值進去，示例如下:

<template>
  <div>
      <div v-drag="{set:setVal,data: outData}">自定義指令</div>
  </div>
</template>

<script>
export default {
  data(){
    outData: 1,
    a: 2,
    b: 3
  },
  methods: {
    setVal(val1,val2) {
      this.a = val1;
      this.b = val2;
    }
  },
  directives: {
    drag: function(el,binding) {
      var value1 = 11;
      var value2 = 22;
      binding.value.set(value1, value2); // 外部的data會接收到內部的value1和value2，執行方法setVal();
      console.log(binding.value.data) // 會得到外部傳入的 outData : 1
    }
  }
}
</script>