沒有明確聲明的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道具

回答

相關問題