VUE动态style样式

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

所有使用基于组件的体系结构(如Vue和React)的开发人员都知道，创建可重用组件是很困难的，而且大多数情况下，最终会通过传入大量的属性，以便从外部更容易地控制和自定义组件。这并不坏，但是传递大量属性确实会变得有点麻烦和丑陋。

我们以 vuetify 的按钮组件为例，它是最简单的组件之一。假设我们想要在大多数情况下传递相同的属性：

  Hello Meat

将它们放在单独的文件中是有意义的，这个文件我们取名为props.js

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

使用v-bind指令，对于必须在组件的data选项中定义的对象，它将绑定所有属性。

vue组件上动态添加和删除属性

// 添加

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

// 删除

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