【Vee-Validate】子コンポーネントのバリデーションエラーを検出する方法（依存性の注入）

公式ドキュメントの内容はこちら
Component Injections

親のバリデータスコープを注入する

各コンポーネントには独自のバリデータスコープがあり、
あるコンポーネントのフィールドに別のコンポーネントからのアクセスを許可しないため、
コンポーネント間でフィールドを共有してエラーを通知したり、UIの状態を表示させる必要があります。

export default {
  inject: ['$validator'],
  // ...
}

// or

export default {
  inject: {
    $validator: '$validator'
  },
  // ...
}

上記により、コンポーネントは親のバリデータスコープを継承し、すべてのエラーと検証状態を共有します。
つまり、子コンポーネントが親のバリデータを使用できるので、すべてのエラーが1つの場所にあることを意味しており、
同じエラーやフィールドにもアクセスすることが可能になります😇

If the direct parent isn't able to provide a validator scope, the API will traverse the tree upwards looking for a parent that can.

直属の親がバリデータスコープを提供できない場合は、Inject APIはツリーを上向きに移動して、提供できる親を探します。

自動注入を無効にする

すべての自動注入を停止して、プラグインのメモリ占有量を減らすこともできます✌️

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, { inject: false })

上記により、プラグインはルートインスタンスを除いて、各コンポーネントインスタンスの新しいバリデータスコープをインスタンス化しなくなります。
しかし、コンポーネントがバリデータインスタンスを必要に応じて取得する方法を管理する必要が出てきます。
したがって、親からそれを注入したり、独立したバリデータスコープを要求したりと管理しなくてはいけません。

また、Inject API を使用して親バリデータを非表示にすると、自動注入状態に関係なく同じ動作するようになります。
コンポーネントは常に、バリデータスコープを提供できる最初の親からバリデータインスタンスを取得します。

新しいバリデータスコープのリクエスト

コンポーネントのVeeValidateコンストラクタオプションでバリデータプロパティを設定すると、
以下のようになります。

export default {
  $_veeValidate: {
    validator: 'new' // 新しいバリデータスコープ
  },
  // ...
};

通常、コンポーネントはさまざまな理由で新しいバリデータスコープを必要とします。
新しいバリデータスコープを要求すると、コンポーネントはその子コンポーネントに対するバリデータインスタンスの唯一のプロバイダになります。

Nuxt.jsで使用する場合の注意点

Nuxt.jsのようなSSRフレームワークでは、自動注入を無効にすることが推奨されています。
これは、すべてのコンポーネントに対して作成されるすべてのバリデータインスタンスがメモリリークを引き起こす可能性あるからです😷

参考