如何在自定义指令中判断组件是否存在v-bind:error绑定？

嘿，这个问题其实不难解决，核心是利用自定义指令钩子函数里的参数获取组件或元素的绑定信息，我分Vue 2和Vue 3两种场景给你说明：

Vue 2 解决方案 #

在自定义指令的钩子（比如bind或inserted）中，你可以通过vnode参数获取组件实例，或者直接检查绑定指令：

方法1：通过组件实例检查属性/Props #

这种方式适合确认组件是否实际接收到了error绑定值（不管它是组件的Prop还是普通属性）：

Vue.directive('my-custom-directive', {
  inserted(el, binding, vnode) {
    // 获取组件实例
    const compInstance = vnode.componentInstance;
    if (compInstance) {
      // 检查error是否是组件的Prop
      const hasErrorProp = 'error' in compInstance.$props;
      // 检查error是否是普通属性绑定（非Prop）
      const hasErrorAttr = 'error' in compInstance.$attrs;
      // 满足任一条件即说明存在绑定
      const hasErrorBinding = hasErrorProp || hasErrorAttr;
      console.log('组件是否带有v-bind:error绑定:', hasErrorBinding);
    }
  }
});

方法2：直接检查vnode上的绑定指令 #

这种方式更直接，无需依赖组件实例，直接查看当前元素/组件上是否存在v-bind:error绑定：

Vue.directive('my-custom-directive', {
  bind(el, binding, vnode) {
    // 遍历vnode上的所有指令，查找v-bind:error
    const hasErrorBind = vnode.data.directives?.some(dir => {
      return dir.name === 'bind' && dir.arg === 'error';
    });
    console.log('是否存在v-bind:error绑定:', hasErrorBind);
  }
});

Vue 3 解决方案 #

Vue 3的自定义指令API略有调整，组件实例的获取方式改为vnode.component，钩子参数也有变化：

方法1：通过组件实例检查 #

const app = Vue.createApp({});
app.directive('my-custom-directive', {
  mounted(el, binding, vnode) {
    const compInstance = vnode.component;
    if (compInstance) {
      // Vue 3中直接检查组件的props或attrs
      const hasErrorProp = 'error' in compInstance.props;
      const hasErrorAttr = 'error' in compInstance.attrs;
      const hasErrorBinding = hasErrorProp || hasErrorAttr;
      console.log('组件是否带有v-bind:error绑定:', hasErrorBinding);
    }
  }
});

方法2：直接检查绑定指令 #

const app = Vue.createApp({});
app.directive('my-custom-directive', {
  beforeMount(el, binding, vnode) {
    const hasErrorBind = vnode.dirs?.some(dir => {
      return dir.name === 'bind' && dir.arg === 'error';
    });
    console.log('是否存在v-bind:error绑定:', hasErrorBind);
  }
});

小提示 #

• 如果error是my-component定义的Prop，方法1里的hasErrorProp会更准确；如果只是普通属性绑定，hasErrorAttr会生效。
• 推荐在inserted（Vue2）或mounted（Vue3）钩子中检查组件实例，此时组件已完成初始化，实例属性更可靠。

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