明示的に宣言されていないVueの小道

Question

私はredux-formと似たような試みをしていますが、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を含むオブジェクトであることにつながるであなたは、単にこのような何かをするだろう反応します。

<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は、これらの「未知」の小道具にアクセスして、その子コンポーネントに渡すことができます。

しかし、Vueの中

私はこのようになりますいくつかのコードを持っていますか？ $vm.$propsは、単に明示的に宣言された小道具を生成しますが、もう一方は完全に無視します（ unknownPropAおよび unknownPropB）。 "動的に"小道具を通過させる力は、多くの場合に本当に役に立つので、私が探しているものです。

注：

は、これまでのところ、私はVueのは、単純なもののために素晴らしいですし、それが何かアップし、それは、たとえば、中にも反応するよりも実行されている取得する方法より高速だと思います。しかし、何かが "普通ではありません"とすぐに、これまでのところ、Reactがもっと役に立ちました。これは、もちろん、私のVueの知識の欠如によるものかもしれません。

Answer 1

です扱いにくく、確かにネイティブにサポートされていませんが、vnodeから渡された属性を取得してthis.$vnode.elm.attributesを使用してループし、それらをループして、それらを小道具オブジェクトに追加することができます前もって宣言される）。あなたはこの自分を処理されますので、私はそれを再利用することができ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

代わりにオブジェクトを子に子として渡すことができ、必要なすべてのプロパティを持つことができます。

それはのようにすることができ

：

yourObjができ

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

：{"A": "abc", "B": "123"}

だから、あなただけの小道具に定義することができます。子でunknownPropObjを、アクセスのすべてのそれはこれがあるプロパティ

Answer 3

あなたはとして認識されていない何かを得るために$attrsを使用することができます小道具：documentation。逆のこともあります：$propsですべての小道具を手に入れることができます。