将vee-validate/HTML属性添加到插槽中的输入元素

Question

在我的应用程序中,我有很多表单,大多数输入看起来都是这样的:

<div class="form-group">
    <label for="language">{{ $t('form.language')}}</label>
    <input type="text" class="form-control" id="language" name="form.language" v-model="language" v-validate.initial="'required'" :data-vv-as="$t('form.language')" />
    <span class="invalid-feedback">{{ errors.first('language') }}</span>
</div>

这一遍又一遍地重复.唯一真正改变的是字段名称和输入类型.有时它是一个选择,有时它是一个更复杂的组件而不是简单的HTML组件.

我的想法是创建一些包装器组件.所以我不必复制所有这些,只需使用类似的东西:

<form-group name="language">
    <input type="text" v-model="form.language">
</form-group>

我尝试以这种方式实现它,但它不起作用:

<template>
    <div class="form-group">
        <label :for="name">{{ $t('form.' + name)}}</label>
        <slot class="form-control"
              :id="name"
              :data-vv-name="name"
              v-validate.initial="'required'"
              :data-vv-as="$t('form.'+ name)">
        </slot>
        <span class="invalid-feedback">{{ errors.first(name) }}</span>
    </div>
</template>

<script>
    export default {
        props: ['name']
    }
</script>

你有什么想法？问题是我无法轻松地将mixins和props传递给slotted元素/组件.

Answer 1

作用域插槽（Vue 2.5.0+）怎么样？

<!-- form-group.vue -->
<template>
  <div>
    <label />
    <slot v-bind="$props" />
    <span />
  </div>
</template>

上面， 的所有 props 都<form-group>使用 绑定到插槽v-bind。您可能只想指定某些字段：<slot :id="name" :data-vv-name="name" />

<form-group name="age">
  <input type="number" slot-scope="slotProps" v-bind="slotProps" />
</form-group>

在这里，<input>可以通过使用 来访问插槽道具slot-scope，并为其命名（此处slotProps）。将包含中定义slotProps的所有 props 。<slot>form-group.vue

更多示例：

<form-group name="language">
  <input type="text" slot-scope="sp" v-bind="sp" />
</form-group>

<form-group name="hello" value="friend">
  <span slot-scope="sp">
    {{ sp.name }}: {{ sp.value }}
  </span>
</form-group>