vue.js - 如何全局导入 VueJs 指令

Question

我在提琴手中创建了一个示例并且可以正常工作，这是我的代码。

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-demo="{myFunction: test, param: 'something'}"></div>
</div>

JavaScript

new Vue({
  el: '#app',
  directives: {
      demo: {
          inserted: function (el, binding) {
              binding.value.myFunction( binding.value.param)
          }
      }
    },
  methods: {
        test (value) {
            alert(value)
      }
  }
})

当我在我的应用程序中使用相同的代码时

HTML

<div v-PermissionOnKeyValue="{perValue:this.$root.ViewSchool,Navigate:'Navigate',navfuncParm:'SchoolIndex'}" data-parms="SchoolIndex">

JS

import Vue from 'vue'
// directive.
export const PermissionOnKeyValue = {
  bind: function (el, binding) {
    const PermissionValue = binding.value.perValue // passed value
    if (PermissionValue) {
      console.log('from bind')
      el.addEventListener('click', function () {
        binding.value.Navigate(binding.value.navfuncParm)
      })
    } else {
      el.style.backgroundColor = '#808080'
    }
  },
  update: function (el, binding) {
    console.log('from update')
    if (binding.value.perValue) {
      console.log('from update if')
      el.addEventListener('click', function () {
        binding.value.Navigate(binding.value.navfuncParm)
      })
    } else {
      el.style.backgroundColor = '#808080'
    }
  }
}

Vue.directive('PermissionOnKeyValue', PermissionOnKeyValue)

错误是导航不是函数。当我在提琴手上运行相同的代码时它正在工作，而我在我的 VueJs 项目中实现此代码来导航它说 Navigate 不是一个函数。我应该怎么办

标签： vue.jsvue-directives