将多个属性传递给 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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。