将多个属性传递给 Vue 组件的方式

所有使用基于组件的体系结构(如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'
}

使用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组件上动态添加和删除属性

// 添加

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

// 删除

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