没有明确声明的Vue道具

我正在尝试类似于redux-form，但在Vue &与Vuex。基本上它应该使表单的处理更加流畅，并且让你写出更少的样板。没有明确声明的Vue道具

我遇到的问题是，当我试图将道具动态地传递给HOC组件时。我不太确定如何去做。在作出反应，你会简单地做这样的事情：

<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然后访问这些“未知”道具，并把它们传递给他们的孩子组成部分？ $vm.$props只是得到我明确声明的道具，但完全无视其他（unknownPropA和unknownPropB）。 “动态”传递道具的力量是我所寻找的，因为它在许多情况下非常有用。

注：

到目前为止，我认为Vue公司是伟大的，简单的事情，它的方式更快地得到的东西运行起来比它会在，比方说，发生反应。但是，只要有什么“不寻常的”，到目前为止，我发现React更有帮助。当然，这可能是由于我缺乏Vue的知识。

来源

2017-03-03 Oscar Linde

我不认为有一个标准的方法来获取未声明的属性，你可以编写你自己的方法来解析'this。el.attributes'作为一个混合，但我的另一个想法是@Saurabh在他的回答更安全更好。 –

模板中的道具应该用kebab-case风格的'unknow-prop-b'写成，并且在你的组件中注册为'props：['unknownPropB']''接受它们 –

我认为这说得好与不好一个诚实的品味问题。对于我来说，把它写成第三部分库，我认为我的用户能够直接在vf-field上指定他们的道具，而不是通过“哑”道具指定它们会更好。传递属性对我来说不起作用，因为用户需要传递的不仅仅是字符串。 –

这是棘手的，肯定不是，但是你可以开始使用通过他们this.$vnode.elm.attributes，然后循环，并将其添加到一个道具对象（确实需要从vnode传递的属性原生支持，预先声明）。因为您要处理这个自己我会把这在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/

来源

2017-03-03 15:27:32

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

它可以是这样的：

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

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

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

来源

2017-03-03 14:53:23 Saurabh

是的，但我想避免这种情况。通过例如感觉更自然。一个“标签”道具的字段本身就像这样：比传递它像。第一个例子更容易编码（更少的代码），并且通过查看vf字段可以更容易地看到实际传递的内容。 –

@OscarLinde嗯，你说的第一个看起来更好，但不幸的是，我没有看到vue文档中的任何支持，因为我认为需要声明它们使其成为被动文档。 – Saurabh

确实:(我试图在文档中查找以及在源文件中，但是找不到任何方法来完成它。如果将我的道具传递给另一个道具是我必须这样做的唯一方法，但是我非常不情愿，API是国王，我相信如果我们正确的话，这是一个需要考虑的特性，因为它不存在。 –

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

来源

2018-01-09 14:37:55 Akryum

没有明确声明的Vue道具

回答

相关问题