执行表达式，而不是在自定义Vue指令中调用方法

Question

我正在使用以下Vue指令来检测元素外部的点击：

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
      el.clickOutsideEvent = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el == event.target || el.contains(event.target))) {
          // and if it did, call method provided in attribute value
          vnode.context[binding.expression](event);
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  });

当我提供这样的方法时，效果很好：

<div id="profile-list-container" v-click-outside="closeProfiles">

但是，当我在属性中放入直接表达式时，它什么也没做：

<div id="profile-list-container" v-click-outside="isProfileOpen = false">

我看到这行vnode.contextbinding.expression; 出了什么问题，但是我不确定如何进行更改以使其正常工作。

Answer 1

因为binding.expression是一个字符串，所以原因vnode.context[binding.expression]是不确定的，所以vnode.context[binding.expression](value)会失败。

然后检查Vue Github，它描述了为什么v-click-outside="isProfileOpen = false"不起作用，可以检查演示（测试用例3），看看会发生什么。

如果可以转换为v-click-outside="()=>{showDiv1 = !showDiv1}"，以下是一个示例：

let vMyDirective = {}
vMyDirective.install = function install (_Vue) {

  _Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
      el.clickOutsideEvent = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el == event.target || el.contains(event.target))) {
          // and if it did, call method provided in attribute value
          //console.log(binding.value, binding.expression)
          if(typeof binding.value==='function') {
            binding.value.bind(vnode.context)(event)
          } else {
            let expression = ''
            let beg = ["'", '`', '"'].includes(binding.expression[0]) ? 1 : 0
            let count = ["'", '`', '"'].includes(binding.expression[binding.expression.length -1]) ? binding.expression.length -1 : binding.expression.length
            expression = binding.expression.substring(beg, count)
            new Function(expression).bind(vnode.context)(event)
          }
        }
      };
      document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.clickOutsideEvent)
    },
  })
}

Vue.use(vMyDirective)

new Vue({
  el: '#app',
  data() {
    return {
      showDiv1: true,
      showDiv2: true,
      showDiv3: true
    }
  },
  methods:{
    clickOutside: function (ev) {
      console.log('test case 1', ev.toString())
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>Test</div>
  <div v-click-outside="clickOutside">
    Test Case 1
  </div>
  <div v-click-outside="()=>{showDiv1 = !showDiv1}">
    Test Case 2: 
    <span v-show="showDiv1" style="background-color:red">Test Case 2: You clicked outside!!!</span>
  </div>
  <div v-click-outside="showDiv2 = false">
    Test Case 3: 
    <span v-show="showDiv2" style="background-color:red">Test Case 3: You will see showDiv2 is false...!!!</span>
  </div>
  <div v-click-outside="`this.showDiv3 = !this.showDiv3`">
    Test Case 4: 
    <span v-show="showDiv3" style="background-color:red">Test Case 4: You clicked outside!!!</span>
  </div>
</div>