在Vue中，我可以轉移道具嗎？

想象一下，我有一個<progress-bar>用戶界面組件，我想創建一個<app-progress-bar>組件，它與<progress-bar>相同，但有一些風格的調整。在Vue中，我可以轉移道具嗎？

AppProgressBar.vue：

<template> <progress-bar class="app-progress-bar"></progress-bar> </template>

這將打破，因爲<progress-bar>需要percent道具。

<progress-bar class="app-progress-bar" percent="percent"></progress-bar>

這似乎很好，但很脆，當<progress-bar>有許多道具：這樣我就可以通過。我可以簡單地通過所有道具嗎？理論語法：

<progress-bar class="app-progress-bar" {...props}></progress-bar>

類似於反應/ JSX。

來源

2016-05-29 Chris Gaudreau

經過研究，我不認爲這是可能的。相反，你可以extend一個組成部分，把一個extraClass鍵上data或computed：

import ProgressBar from './ProgressBar' 

export default { 
    extends: ProgressBar, 
    data() { 
    return { extraClass: 'app-progress-bar' } 
    } 
}

ProgressBar.vue：

<template> 
    <div class="progress-bar" :class="extraClass">...</div> 
</template>

這不乾淨或靈活的反應，但它的工作原理。

來源

2016-05-30 02:33:14

就像已經回答的那樣，擴展組件將是在這種情況下創建組件的好方法。類似於其他語言中的類繼承。

但是，您也可以傳遞一個對象作爲道具。如果你想保持乾淨的東西，不希望延長你的組件，你可以通過這樣的道具：

//object with many values that you need to pass. for ex. 
myObjectWithSuff: { percent: 10%, someOtherStuff: value, ... } 

<progress-bar class="app-progress-bar" myProp="myObjectWithStuff"></progress-bar>

的progress-bar組件內，申報道具myProp。然後你可以訪問該對象的任何屬性。例如：this.myProp.percent。

這只是快速而簡單的，但取決於您的架構，擴展組件可能是一條路。

來源

2016-05-30 06:33:25 crabbly

在Vue中，我可以轉移道具嗎？

回答

相關問題