Vue2如何在export default语法的组件中正确注册自定义指令

Vue2的自定义指令分为局部注册和全局注册两种方式，你可以根据使用场景选择：

方案1：局部注册（仅当前组件可用） #

直接在单文件组件的export default配置中新增directives字段即可，示例如下：

export default {
  name: 'dynamicexample',
  // 组件内自定义指令注册入口
  directives: {
    pin: {
      bind: function (el, binding, vnode) {
        el.style.position = 'fixed'
        var s = (binding.arg == 'left' ? 'left' : 'top')
        el.style[s] = binding.value + 'px'
      }
    }
  },
  data: function () {
    return {
      direction: 'left'
    }
  }
  // 后续其他组件配置（methods、computed等）
}

注册完成后直接在当前组件模板中使用即可，和官方示例用法一致：<div v-pin:[direction]="200"></div>

方案2：全局注册（项目所有组件都可直接使用） #

如果你的自定义指令需要在多个组件复用，直接在项目入口文件（通常是src/main.js）中注册，示例如下：

// src/main.js 内容
import Vue from 'vue'
import App from './App.vue'

// 全局注册自定义指令，写在new Vue()之前
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

之前运行失败的原因 #

你直接把Vue.directive贴在组件的export default上方，会因为单文件组件默认没有暴露全局Vue变量，导致找不到Vue实例触发静默错误。

内容的提问来源于stack exchange，提问作者etayluz