Vue用自定义指令来实现点击空白处组件隐藏

最近在掘金上看到有一位小伙伴说到自己在写控件时遇到点击空白处消失，点击出现。那就说说我的实现方法吧

先来看看效果

这是template里的

这是自定义指令，也是最核心的地方了

接下来一步一步讲这里是如何实现的

• 自定义指令里有钩子函数，我这里主要用了bind（初始化）；unbind（卸载）这两个函数。
• bind是在指令初始化时执行并接受3个参数
  • el 指令所绑定的元素 我这里就是页面中的div
  • binding 就是指令里一些杂七杂八的东西拉 比如v-domOff 就可以从这里获取
  • vnode node节点
• unbind 当指令销毁时也把方法销毁
• 指令内部有定义了两个函数
  • el.handler 当点击空白处时让该组件消失的函数（函数里的东西我会在下面解释）
  • el.stopProp 就是点击自己的时候阻止默认事件啦
  • el是指令绑定的对象所以我在钩子函数里都可以访问el对象（注意这点）

接下来我们就说说el.handler里的代码是什么意思吧 先看看vnode的源码

vnode.context其实是我们绑定的组件，下面是我打印出来vnode的子对象大家可以看到：

• context其实就是该页面的vue实例

说完vnode我们就差一个binding.expression就可以全部理解啦

下面是expression的解释

下面是一个例子

<div v-if="flag">directive</div>

其实v-if就是vue内部封装好的一个自定义指令

• expression就是 ‘flag’变量
• 敲黑板！ expression是变量名字而不是值。 打印expression它是一个string而不是boolean

下面代码的意思就是 更改指令绑定页面实例的变量

vnode.context[binding.expression] = false;

这是小弟第一次写分享 话术可能有点乱，大家见谅。。各位观众姥爷喜欢的话是最好的了～

转载于:https://juejin.im/post/5bf2c6766fb9a049bc4c42ef