未明确声明的 Vue 道具

Question

我正在尝试类似于redux-form的事物，但在Vue＆amp;与vuex。基本上，它应该使形式的处理更加精简，并使您更少编写样板。

我遇到的问题是，当我试图将道具动态传递给HOC的组件时。我不太确定该怎么做。在React中，您只会做这样的事情：

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

和in 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如何访问这些"未知"道具并将其传递给其孩子组成部分？$vm.$props简单地产生了我明确声明的道具，但完全忽略了另一个（unknownPropA和unknownPropB）。我要寻找的"动态"道具的力量是在许多情况下确实有用的。

注意：

到目前为止，我认为Vue非常适合简单的事物，并且要启动和运行的速度要比反应更快。但是，到目前为止，一旦某件事是"平凡的"，我发现反应更有帮助。当然，这可能是由于我在Vue中缺乏知识。

Answer 1

这很棘手，当然不支持，但是您可以使用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: {}
    }
  }

这样，您就可以将未知的道具传递给您的组件中。

。 在

这是您将如何使用mixin：https：//jsfiddle.net/fej7wu5f/

Answer 2

您可以使用$attrs获取任何未识别为prop：document的东西。请注意，相反的情况也存在：您可以使用$props。

Answer 3

相反，您可以将对象传递给儿童作为道具，并且可以具有您想要的所有属性。

可能是：

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

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

因此，您只能在Prop：unknownPropObj中定义孩子，并访问所有属性

Answer 4

您可以使用 v-bind =＆quot; attrs＆quot＆quort＆quort＆quort;

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

您可以将选项 sartaritattrs：false 传递给儿童组件，如果要手动确定哪个元素将接收属性（默认情况下，root element element element element元素继承它们）。

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

参考：https：//v2.vuejs.org/v2/guide/components-props.html#disabling-attribute-inheritance