vuejs2 slots 如何与 parent 通信

Question

我想创建一个 formRow 组件，它有一个用于输入字段的插槽和 vee-validate 用于验证

这是我的标记

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

我尝试将值发送到 parent 并使用插槽上的 @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>

我做错了什么？

Answer 1

您实际上并没有将插槽道具传递给 <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>

vuejs2 slots 如何与 parent 通信

vuejs2 slots how to communicate with parent

slot

vue.js