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

Question

想象一下，我有一個<progress-bar> UI 組件，我想創建一個<app-progress-bar>組件，它與<progress-bar>相同，但有一些樣式調整。

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>

這類似於 React/JSX。

Answer 1

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

但是，您也可以將對象作為道具傳遞。 如果你想保持干凈，不想擴展你的組件，你可以像這樣傳遞一個 prop：

//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 。

這既快速又簡單，但根據您的架構，擴展組件可能是可行的方法。

Answer 2

經過研究，我認為這是不可能的。 相反，您可以extend一個組件並在data或computed上放置一個extraClass鍵：

import ProgressBar from './ProgressBar'

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

進度條.vue：

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

這不像 React 那樣干凈或靈活，但它確實有效。

Answer 3

抽象的

這可以通過將 $attrs 綁定到孩子來完成。 因此，在您的情況下，它將是：

<template>
  <progress-bar v-bind="$attrs" class="app-progress-bar"></progress-bar>
</template>

鏈接到文檔

vm.$attrs：包含父范圍屬性綁定（類和樣式除外）...並且可以向下傳遞給內部組件

來源： Vue $attrs 文檔

例子

假設一個名為<inner>的組件有一個名為dark的布爾屬性和一個名為color的字符串屬性。

現在讓我們定義一個名為<outer>的外部組件，它在其定義中包裝了<inner> 。

<template>
  <inner></inner>
</template>
.
.
.
name: 'outer'

這里的問題是，如果我們使用<outer>組件，我們無法將深色和彩色道具傳遞給知道如何處理它們的<inner>組件。 例如<inner dark color="blue"></inner>有效，但<outer dark color="blue"></outer>無效。

如果您更改<outer>的定義以包含$attrs綁定，它將為您傳輸所有道具（這不包括style和class ）。 這是新定義：

<template>
  <inner v-bind="$attrs"></inner>
</template>
.
.
.
name: 'outer'

現在您可以使用<outer dark color="blue"></outer>了。

附加說明

您還可以默認使用inheritAttrs來防止這種行為。 你可以在這里查看官方的 Vue 文檔，我還發現了這個 JSFiddle ，它給出了一個使用inheritAttrs的例子。