几个月前写了一个 v-arrow 的自定义指令，用于给一个html元素添加一个小三角，如图所示。

v-arrow.top={left: '10px'}。表示 小三角 出现的位置在盒子上边并且距离左侧10px的位置。

 

 

但是这几天封装新组件的时候要用到这个v-arrow, 修饰符.top(除此之外还有.bottom / .left / .right),并且还有以key-value的形式传入的value。其实可以修改v-arrow这个指令，让修饰符modifiers 的参数都在value中传入和获取，但是修改这个指令的代码就意味着我还要修改用到这个v-arrow指令的其他地方。

所以，动态传入修饰符modifiers 和 动态传入value 就显得很是重要。

v-arrow:[arrowPlacement]="arrowOffset" 

// arrowPlacement 传入的值要在binding.arg中取，如果是静态v-arrow.top的话，'top'在binding.modifiers中

arrowPlacement、arrowOffset 都是变量。
若 arrowPlacement = 'top', arrowOffset = {left: '20px'};
那么 等价于 v-arrow.top="{left: '20px'}"

 

 

 动态 传入的 top 修饰符在arg 中，动态传入的{left: '10px'}在value中。

value是Object格式，可以传入多个，modifiers 也是可以传入多个

 

 

 如果用arg的方式传入多个修饰符的话，可以将  v-arrow:[arrowPlacement] 的 arrowPlacement = ['top',  'left']。

 

 

最后， arg 和 modifiers 可以共存。