Слоты vuejs2, как общаться с родителем

Я хочу создать компонент formRow со слотом для поля ввода и vee-validate для проверки.

это моя разметка

//form
<vFormRow validate="required" v-slot="{ onInput, errors }">
  <vTextfield @input="onInput" :errors="errors"/>
</vFormRow>

Я попытался передать значение родителю и получить значение с помощью @input=onInput в слоте, но это не работает.

//formrow
<template>
  <div class="mb-4">
    <v-validation-provider
      v-slot="{ errors }"
      :rules="validate"
    >
      <label>{{ label }}</label>
      <slot 
        :onInput="onInput"
        :errors="errors"
      />
      <vFormError
        :message="errors[0]"
      />
    </v-validation-provider>
  </div>
</template>

<script>
import { ValidationProvider as vValidationProvider } from 'vee-validate'
import vRadioButton from '@primitives/textfield'
import vFormError from '@primitives/formError'
export default {
  components: {
    vTextfield,
    vFormError,
    vValidationProvider
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    validate: {
      type: String,
      required: true,
    }
  },
  methods: {
    onInput(value) {
      console.log(value)
    }
  }
}
</script>

//textfield

<template>
  <div>
    <input :value="value" @input="onInput"/>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    errors: {
      type: Array,
      default: () => {}
    }
  },
  data: {
    return {
      // local_value: ''
    }
  }
  methods: {
    onInput(e) {
      // this.local_value = e.target.value
      this.$emit('input', e.target.value)
    }
  }
}
</script>

Что я делаю неправильно?


vue.js slot
person Gregor Voinov    schedule 16.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле вы не передаете реквизиты слота <vTextfield>. Я думаю, вы можете предположить, что привязки данных и обработчики событий на <slot> автоматически применяются к дочерним элементам слота, но это не так.

Чтобы использовать свойство слота value, деструктурируйте его из v-slot и привяжите его к <vTextfield> ребенок:

<vFormRow validate="required" v-slot="{ value }">
  <vTextfield :value="value" />
</vFormRow>

Вы также можете передать метод onInput в качестве реквизита слота:

// vFormRow.vue
<slot :onInput="onInput" />

Затем привяжите обработчик события к <vTextfield>:

<vFormRow validate="required" v-slot="{ onInput }">
  <vTextfield @input="onInput" />
</vFormRow>
person tony19    schedule 17.04.2021