舉個例子 ：clickoutside.js

const clickoutsideContext = '@@clickoutsideContext';export default {/*@param el 指令所綁定的元素@param binding {Object} @param vnode vue編譯生成的虛擬節點*/bind (el, binding, vnode) {const documentHandler = function(e) {console.log(el)console.log(e.target);console.log(vnode);console.log(binding);if(!vnode.context || el.contains(e.target)) {return false;}if (binding.expression) {vnode.context[el[clickoutsideContext].methodName](e)} else {el[clickoutsideContext].bindingFn(e);}}el[clickoutsideContext] = {documentHandler,methodName: binding.expression,bindingFn: binding.value}setTimeout(() => {document.addEventListener('click', documentHandler);}, 0)},update (el, binding) {el[clickoutsideContext].methodName = binding.expression;el[clickoutsideContext].bindingFn = binding.value;},unbind(el) {document.removeEventListener('click', el[clickoutsideContext].documentHandler);} }

?

directive是怎么實現的呢?

1、在binding中寫綁定方法

2、方法需要寫在一個環境（context）中，放置泄露

如上定義了：el[clickoutsideContext]

轉載于:https://www.cnblogs.com/heyinwangchuan/p/8052211.html

總結

以上是生活随笔為你收集整理的如何写一个vue指令directive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。