所有使用基于組件的體系結(jié)構(gòu)(如Vue和React)的開(kāi)發(fā)人員都知道，創(chuàng)建可重用組件是很困難的，而且大多數(shù)情況下，最終會(huì)通過(guò)傳入大量的屬性，以便從外部更容易地控制和自定義組件。這并不壞，但是傳遞大量屬性確實(shí)會(huì)變得有點(diǎn)麻煩和丑陋。

[[321525]]

我們以 vuetify 的按鈕組件為例，它是最簡(jiǎn)單的組件之一。假設(shè)我們想要在大多數(shù)情況下傳遞相同的屬性：

<v-btn 
  color='primary' 
  href='https://alligator.io' 
  small 
  outline 
  block 
  ripple 
> 
  Hello Meat 
</v-btn> 

將它們放在單獨(dú)的文件中是有意義的，這個(gè)文件我們?nèi)∶麨閜rops.js

export const buttonProps = { 
  color: 'primary', 
  small: true, 
  outline: true, 
  block: true, 
  ripple: true, 
  href: 'https://alligator.io' 
} 

JSX 和 render 函數(shù)

由于JSX 和 render 函數(shù)在渲染時(shí)為我們提供了更多的功能和靈活性，所以一次傳遞多個(gè)屬性是相當(dāng)容易的。

在 render 函數(shù)中：

import { buttonProps as props } from './props.js'; 
 
export default { 
  render: h => h( 
    'v-btn', 
    { props }, 
    'Hello Meat' 
  ) 
}; 

在 JSX 中：

import { buttonProps as props } from './props.js'; 
 
const data = { props } 
 
export default { 
  render: h => <v-btn {...data}>Hello Meat</v-btn> 
}; 

使用 Vue.js 模板

使用Vue template怎么樣?不用擔(dān)心，那也是可能的。我們所需要做的就是使用v-bind指令。對(duì)于必須在組件的data選項(xiàng)中定義的對(duì)象，它將綁定所有屬性

<template> 
  <v-btn v-bind='buttonProps'> 
    Hello Meat 
  </v-btn> 
</template> 
 
<script> 
  import { buttonProps } from './props.js'; 
 
  export default { 
    data: () => ({ buttonProps }) 
  } 
</script> 

使用此技巧，我們無(wú)需在應(yīng)用中的多個(gè)位置填充重復(fù)屬性的模板，同時(shí)仍然可以使用受歡迎的模板標(biāo)記。

總結(jié)

使用本文中提到的示例，可以簡(jiǎn)化將多個(gè)屬性傳遞給組件的操作。這對(duì)于具有很多屬性的表示性和第三方組件特別有用。

注意，這里使用的示例僅僅演示。如果想制作更加靈活可用的，可以根據(jù)具體情況使用更好的方法，例如創(chuàng)建自己的包裝器組件。