所有使用基於組件的體系結構(如Vue和React)的開發人員都知道，創建可重用組件是很困難的，而且大多數情況下，最終會通過傳入大量的屬性，以便從外部更容易地控制和自定義組件。這並不壞，但是傳遞大量屬性確實會變得有點麻煩和醜陋。
我們以 vuetify 的按鈕組件為例，它是最簡單的組件之一。假設我們想要在大多數情況下傳遞相同的屬性：
<code><v-btn> color='primary'
href='https://alligator.io'
small
outline
block
ripple
>
Hello Meat
/<v-btn>/<code>
將它們放在單獨的文件中是有意義的，這個文件我們取名為props.js
<code>export const buttonProps = {
color: 'primary',
small: true,
outline: true,
block: true,
ripple: true,
href: 'https://alligator.io'
}/<code>JSX 和 render 函數
由於JSX 和 render 函數在渲染時為我們提供了更多的功能和靈活性，所以一次傳遞多個屬性是相當容易的。
在 render 函數中：
在 JSX 中：
使用 Vue.js 模板
使用Vue template怎麼樣？不用擔心，那也是可能的。我們所需要做的就是使用v-bind指令。對於必須在組件的data選項中定義的對象，它將綁定所有屬性
使用此技巧，我們無需在應用中的多個位置填充重複屬性的模板，同時仍然可以使用受歡迎的模板標記。
總結
使用本文中提到的示例，可以簡化將多個屬性傳遞給組件的操作。這對於具有很多屬性的表示性和第三方組件特別有用。
注意，這裡使用的示例僅僅演示。如果想製作更加靈活可用的，可以根據具體情況使用更好的方法，例如創建自己的包裝器組件。
作者：Jover Morales 譯者：前端小智 來源：alligator原文：https://alligator.io/vuejs/passing-multiple-properties/
分享到:
閱讀更多 前端小智 的文章
