Question

我正尝试类似于redux-form但在Vue＆amp;与Vuex。基本上它应该使表单的处理更加简化，并使你编写更少的样板。

我遇到的问题是当我试图将道具动态地传递给HOC中的组件时。我不太清楚怎么做。在React中，您只需执行以下操作：

<VfField unknownPropA="abc" unknownPropB="123" name="test" />

在VfField.js中：

export default ({name, ...props}) => <div name={name}><InputComponent {...props} /></div>

这会导致props成为包含unknownPropA和unknownPropB的对象。

但在Vue中我有一些看起来像这样的代码：

<vf-form @submit="submit" @validate="validate">
  <vf-field type="text" name="username" unknownPropA="abc"></vf-field>
  <vf-field type="password" name="password" unknownPropB="123"></vf-field>
  <button type="submit">Submit</button>
</vf-form>

那么vf-field如何才能访问这些＆＃34;未知＆＃34;道具并将它们传递给他们的子组件？ $vm.$props只是生成我明确声明的道具，但完全忽略了另一个（unknownPropA和unknownPropB）。动力＆＃34;动力＆＃34;传递道具是我正在寻找的，因为它在许多情况下非常有用。

注意：

到目前为止，我认为Vue对于简单的事情来说非常棒，而且比起React的速度更快。但是，只要事情发生异常＆＃34;到目前为止，我发现React更有帮助。当然，这可能是由于我对Vue缺乏了解。

Answer 1

这很棘手，当然不会原生支持，但是您可以使用vnode从this.$vnode.elm.attributes获取传递的属性，然后循环遍历它们并将它们添加到props对象（需要声明前期）。因为您将自己处理这个问题，所以我会将其放在mixin中，以便可以重复使用，但您可以这样做：

  methods: {
    getProps() {
      let props = this.$vnode.elm.attributes;
      Object.keys(props).forEach(key => {
        this.$set(this.props, props[key].name, props[key].nodeValue)
      });
    }
  },
  data(){
    return{
      props: {}
    }
  }

然后，您可以传递未知的道具，就像在组件中声明它们一样。

我已经制作了一个JSFiddle来向您展示这个过程：https://jsfiddle.net/2c23Lb5t/

以下是使用mixin：https://jsfiddle.net/fej7wu5f/

执行此操作的方法

Answer 2

您可以使用$attrs获取任何未被识别为道具的内容：documentation。请注意，相反的情况也存在：您可以使用$props获取所有道具。

Answer 3

相反，你可以将一个对象作为道具传递给子，它可以拥有你想要的所有属性。

可以是：

<VfField :unknownPropObj=yourObj name="test" />

yourObj可以是：{"A": "abc", "B": "123"}

所以你只能在孩子的prop unknownPropObj上定义，并访问它的所有属性

Answer 4

您可以通过 v-bind="$attrs"

实现这一点

<VfField v-bind="$attrs" name="test" />

如果您想手动决定哪个元素将接收属性（默认情况下根元素继承它们），您可以将选项 inheritAttrs: false 传递给子组件。

<script>
  export default {
    inheritAttrs: false,
  };
</script>

参考：https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance

没有明确声明的Vue道具

4 个答案: