將多個屬性傳遞給 Vue 組件的幾種方式

做者：Jover Morales
譯者：前端小智
來源：alligator

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

全部使用基於組件的體系結構(如Vue和React)的開發人員都知道，建立可重用組件是很困難的，並且大多數狀況下，最終會經過傳入大量的屬性，以便從外部更容易地控制和自定義組件。這並不壞，可是傳遞大量屬性確實會變得有點麻煩和醜陋。

咱們以 vuetify 的按鈕組件爲例，它是最簡單的組件之一。假設咱們想要在大多數狀況下傳遞相同的屬性：

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

將它們放在單獨的文件中是有意義的，這個文件咱們取名爲props.js

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

JSX 和 render 函數

因爲JSX 和 render 函數在渲染時爲咱們提供了更多的功能和靈活性，因此一次傳遞多個屬性是至關容易的。

在 render 函數中：

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怎麼樣？不用擔憂，那也是可能的。咱們所須要作的就是使用v-bind指令。對於必須在組件的data選項中定義的對象，它將綁定全部屬性

<template>
  <v-btn v-bind='buttonProps'>
    Hello Meat
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>

使用此技巧，咱們無需在應用中的多個位置填充重複屬性的模板，同時仍然可使用受歡迎的模板標記。

總結

使用本文中提到的示例，能夠簡化將多個屬性傳遞給組件的操做。 這對於具備不少屬性的表示性和第三方組件特別有用。

注意，這裏使用的示例僅僅演示。若是想製做更加靈活可用的，能夠根據具體狀況使用更好的方法，例如建立本身的包裝器組件。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://alligator.io/vuejs/pa...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。