如何运行Vue2 CLI自定义指令内的函数？如何从方法或其他指令调用？

你当前写法的核心问题：runme是inserted钩子的内部局部函数，钩子执行完成后函数就会被回收，外部完全无法访问，必须先调整函数的挂载位置，再根据调用场景选择对应方式。

方案1：把目标函数挂载到绑定的DOM元素上 #

适合单组件内需要触发指定绑定元素逻辑的场景

• 修改自定义指令暴露函数
  把runme绑定到指令绑定的DOM元素的自定义属性上（用下划线开头命名避免和原生属性冲突）：

  directives: {
    swipe: {
      inserted: function(el) {
        // 把runme挂到当前DOM的自定义属性上
        el.__runme = function(obj) {
          alert(obj)
        }
        // 如果inserted钩子需要默认执行一次，直接调用即可
        el.__runme(el)
      },
    },
  },
  

• 从组件methods中调用
  • 给绑定了v-swipe指令的DOM元素添加ref标识，方便组件实例获取：

    <template>
      <div>
        <div v-swipe ref="swipeTarget">绑定指令的元素</div>
        <button @click="triggerRunme">调用runme</button>
      </div>
    </template>
    

  • 在methods中通过$refs拿到DOM，调用挂载的函数：

    methods: {
      triggerRunme() {
        const targetEl = this.$refs.swipeTarget
        // 兜底判断避免DOM未挂载时报错
        if (targetEl?.__runme) {
          // 传入自定义的obj参数即可
          targetEl.__runme({ type: '从组件方法调用' })
        }
      }
    }
    

• 从其他自定义指令中调用
  • 如果其他指令和v-swipe绑定在同一个DOM元素上，直接在该指令的钩子里读取el.__runme调用即可：

    // 同组件内的其他自定义指令
    directives: {
      otherDirective: {
        inserted(el) {
          if (el.__runme) el.__runme(el)
        }
      }
    }
    

  • 如果两个指令绑定在不同的DOM元素上，通过指令钩子的第三个参数vnode.context拿到当前组件实例，再通过$refs获取目标DOM：

    directives: {
      otherDirective: {
        // el是当前指令绑定的DOM，binding是指令的绑定值，vnode是虚拟节点上下文
        inserted(el, binding, vnode) {
          // vnode.context就是当前组件的Vue实例
          const component = vnode.context
          const targetEl = component.$refs.swipeTarget
          if (targetEl?.__runme) targetEl.__runme(el)
        }
      }
    }
    

方案2：全局挂载公共函数 #

适合多组件、多指令复用同一逻辑的场景

• 在项目入口文件或指令定义文件中全局挂载runme逻辑：

  import Vue from 'vue'
  // 定义公共runme逻辑
  Vue.prototype.$swipeRunme = function(obj) {
    alert(obj)
  }
  

• 原指令的钩子直接调用全局方法（指令钩子里的this不是Vue实例，需直接通过Vue原型调用）：

  directives: {
    swipe: {
      inserted(el) {
        Vue.prototype.$swipeRunme(el)
      }
    }
  }
  

• 组件methods、其他指令中可直接调用：

  // 组件methods中调用
  methods: {
    callRunme() {
      this.$swipeRunme({ msg: '自定义参数' })
    }
  }
  
  // 其他自定义指令中调用
  directives: {
    otherDirective: {
      inserted(el) {
        Vue.prototype.$swipeRunme(el)
      }
    }
  }
  

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