VeeValidateメモ

validate.md

slotについて

このerrorsがどこから着ているか。

<ValidationProvider v-slot="{errors}" rules="secret">
    <input type="text" v-model="name">
    {{errors[0]}}
</ValidationProvider>

↑の構文はslotがデフォルトしかない場合に使える省略記法。 全部書くとこう。

<ValidationProvider rules="secret">
  <template v-slot:default="slotProps">
    <input type="text" v-model="name">
    {{slotProps.errors[0]}}
  </template>
</ValidationProvider>

v-slot:スコープ名="変数"で、slotを提供しているコンポーネントの変数にアクセスできる。

ValidationProviderはきっとこんな感じになってる。 ※とはいえコードチラ見した結果、全然違う。slotとか見当たらない。 render使った書き方ぜんぜんわからん。

<template>
<div>
    <!--slot提供側で公開する変数をbindする -->
    <slot v-bind:context="context"></slot>
</div>
</template>

<script>
    export default () {
        data() {
            return {
                Context: {
                    errors: []
                }
            }
        }
    }
</script>