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>