128 vee-validate 3점대 버전 (vue 2점대버전이라..) (정리중..)

source: categories/study/vue-experiance/vue-experiance_9-99_29.md

128 vee-validate 3점대 버전 (vue 2점대버전이라..) (정리중..)

Validation Provider

먼저 필드의 유효성 검사기 역할을 하는 ValidationProvider 컴포넌트를 등록해야합니다.
이 컴포넌트는 범위 지정 slot을 통해 작동하여 템플릿에 유효성 검사 오류를 제공합니다.

Validation Provider 등록

ValidationProvider 컴포넌트를 등록하려면 컴포넌트 내에서 로컬(지역적)로 등록할 수 있습니다.(권장)
전역적으로 등록하지말고 아래처럼 지역적으로 등록하는게 좋습니다.
vee-validate뿐만아니라 어떤 라이브러리라도 지역적으로 등록하는 것이 좋습니다.

import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  }
};

전역적으로 등록하고 사용하려면 Vue.component를 사용해 아래와 같이 하면됩니다.

import { ValidationProvider } from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);
// ...

번들러를 사용하지 않고 브라우저나 CDN에서 vee-validate를 사용하는 경우는 아래와 같이 하면 됩니다.

<script>
  // ...
  Vue.component('validation-provider', VeeValidate.ValidationProvider);
  // ...
</script>

그런 다음 컴포넌트 템플릿에서 사용할 수 있습니다.
일반적으로 ValidationProvider로 입력을 래핑합니다.

<ValidationProvider v-slot="v">
    <input v-model="value" type="text">
</ValidationProvider>

// 정리중..
// https://vee-validate.logaretm.com/v3/guide/basics.html#registering-the-validation-provider