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

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

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

<v-btn
  color='primary'
  
  small
  outline
  block
  ripple
>
  Hello Meat
</v-btn>

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

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

使用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>

vue組件上動態(tài)添加和刪除屬性

// 添加

this.$set(this.obj, 'propName', val)

// 刪除

this.$delete(this.obj, 'propName', val)