未明确声明的 Vue 道具

Question

我正在尝试类似于 redux-form 的东西，但在 Vue 和 Vuex 中。基本上它应该使表单的处理更加流线型并让您编写更少的样板文件。

我遇到的问题是当我试图将 props 从 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 如何访问这些 "unknown" 属性并将它们传递给它们的子组件呢？ $vm.$props 简单地产生我明确声明的道具，但完全无视其他道具（unknownPropA 和 unknownPropB）。 "dynamically" 传递 props 的能力正是我所寻找的，因为它在很多情况下都非常有用。

注：

到目前为止，我认为 Vue 非常适合简单的事情，而且它比在 React 中更快运行。但是只要是 "out of the ordinary"，到目前为止，我发现 React 更有帮助。当然，这可能是由于我对 Vue 缺乏了解。

Answer 1

相反，您可以将 object 作为道具传递给 child，它可以拥有您想要的所有属性。

可以像这样：

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

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

所以你只能在 child 中定义属性：unknownPropObj，并访问它的所有属性

Answer 2

这很棘手，而且本机当然不支持，但是您可以使用 this.$vnode.elm.attributes 从 vnode 获取传递的属性，然后遍历它们并将它们添加到 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 3

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

获得所有道具

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 道具

Vue props that aren't explicitly declared

javascript

frontend

vue.js

vuejs2