如何在外部文件中使用 Vue 指令并导入组件？答案

【问题标题】：How to use Vue directive in external file and import into components?如何在外部文件中使用 Vue 指令并导入组件？
【发布时间】：2021-05-29 15:50:59
【问题描述】：

我在项目中使用 Vuelidate，当用户键入内容时，我设置了超时等待验证。我尝试使用 mixins，它成功了，但是为了养成良好的习惯，我需要创建一个 Vue 指令而不全局注册它，并在某些组件中使用它。

我创建了一个外部文件 directives/delayTouch.js（我尝试只导出 const 和 export const 但 Vue 强迫我使用 export default）

const delayTouch = {
  inserted ($v) {
    const touchMap = new WeakMap()

    $v.$reset()
    if (touchMap.has($v)) {
      clearTimeout(touchMap.get($v))
    }

    touchMap.set($v, setTimeout($v.$touch, 1000))
  }
}

export default delayTouch

然后我导入到我的组件中：

<template>
  <TextField
    v-delay-touch="$v.data.name"
    :v="$v.data.name"
    v-model.trim="$v.data.name.$model"
    id="name"
    label="Nome da campanha"
  />
</template>
<script>
import delayTouch from '@/directives/delayTouch'
    
export default {
  directives: { delayTouch }
}
</script>

在参数 ($v) 中，我正确接收了 HTML，但仍然收到错误 $v.reset is not a function。为什么？

【问题讨论】：

标签： javascript vue.js vue-component vuelidate vue-directives

【解决方案1】：

指令挂钩接收4 arguments:

el、binding、vnode 和 oldVnode

所以inserted 钩子的第一个参数是HTML 元素，而不是$v 对象。要将组件属性引入指令，请使用指令的 vnode 参数，通过它获取组件的 context：

inserted(el, binding, vnode) {
  const $v = vnode.context.$v;
  ...
}

无论您想在指令中的何处访问元素，请使用el。

【讨论】：