8

在我的应用程序中，我有很多表单，大多数输入看起来完全像这样：

<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 传递给开槽元素/组件。

4

2 回答 2

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将包含 中<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>
于 2018-06-11T11:44:55.920 回答
0

正如评论中所说，不可能将道具从 传递到插槽的内容，即您的<input>.

由于这是相当复杂的情况，因此需要使用渲染函数，该函数将自定义属性发送到新标签中，同时应用一组默认属性。

我在这里做了一个概念证明：https ://codepen.io/anon/pen/Ozadop?editors=1010

Vue.component('my-input', {
  render: function(createElement) {
    const defaultSlot = this.$slots.default[0];
    const domProps = Object.assign({
      value: this.value,
      someProp: 'foobar',
      test: "asdf",
      class: defaultSlot.data.staticClass
    }, defaultSlot.data.attrs);
    return createElement(
      defaultSlot.tag, // tag name
      {
        attrs: domProps,
        props: domProps,
        on: {
          input: (event) => {
            this.value = event.target.value
            this.$emit('input', event.target.value)
          }
        }
      }
    )
  },
  props: {
    name: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  }
})

new Vue({
  el: "#app",
  data() {
    return {
      name: "Your Name",
      age: 5
    }
  }
});
.red {
  border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  Hello, {{name}}!! You are {{age}} years old.
  <br/>
  <my-input v-model="name">
    <input customProp="myCustomProp"></input>
  </my-input>

  <my-input v-model="age">
    <input type="number" required class="red" custom="otherCustom"></input>
  </my-input>

</div>

请注意，这将要求将所有不是属性的东西应用到具有当前上下文的包装 Vue 组件。

这需要进行调整以支持您的所有需求，例如选择字段和类似内容，但我相信这是一个好的开始。

于 2018-01-18T18:17:26.333 回答