Vue自定义指令v-errorable实现表单错误绑定问题求助

Got it, let's walk through building this directive step by step. The goal is to automatically bind the errors and error-messages props to your custom component using just v-errorable="'town'", right?

Here's the Complete Directive Code #

// errorable.js
export default {
  name: 'errorable',
  bind(el, binding, vnode) {
    // Get the component instance from the vnode
    const component = vnode.componentInstance;
    if (!component) {
      console.warn('v-errorable can only be used on Vue components, not plain elements');
      return;
    }

    // Access the parent component's context (where formErrors and getErrorKey live)
    const context = vnode.context;
    const errorKey = context.getErrorKey(binding.value);

    // Helper function to update the component's error props
    const updateErrorProps = () => {
      component.$props.errors = context.formErrors.has(errorKey);
      component.$props['error-messages'] = context.formErrors.getAll(errorKey);
    };

    // Initial update to set the initial error state
    updateErrorProps();

    // Watch for changes in formErrors to keep props reactive
    const unwatch = context.$watch('formErrors', updateErrorProps, { deep: true });

    // Store the unwatch function for cleanup later
    component._errorableUnwatch = unwatch;
  },
  unbind(el, binding, vnode) {
    const component = vnode.componentInstance;
    if (component && component._errorableUnwatch) {
      // Clean up the watcher to avoid memory leaks
      component._errorableUnwatch();
      delete component._errorableUnwatch;
    }
  }
};

Key Details Explained #

• Parent Context Access: vnode.context gives us direct access to the parent component where your formErrors computed property and getErrorKey mixin method are defined. That's how we can call those functions from the directive.
• Component Instance: vnode.componentInstance refers to the actual instance of your some-custom-component. We use this to update its props directly.
• Reactive Sync: We run updateErrorProps once on initial bind to set the starting error state, then set up a deep watcher on formErrors. This ensures the component's error props update automatically whenever your validation state changes.
• Cleanup: The unbind hook removes the watcher when the directive is detached from the component, preventing memory leaks.

Usage Notes #

• Ensure your custom component (some-custom-component) explicitly accepts errors (Boolean) and error-messages (Array/List) as props. The directive depends on these existing to work correctly.
• If getErrorKey ever returns a transformed key (like converting 'town' to 'shipping.town'), the directive will handle it automatically since we call context.getErrorKey(binding.value) directly.

That's it! Now you can use <some-custom-component v-errorable="'town'"></some-custom-component> and it will behave exactly like your original verbose code.

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