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

栏目: IT技术 · 发布时间: 4年前

内容简介:所有使用基于组件的体系结构(如Vue和React)的开发人员都知道,创建可重用组件是很困难的,而且大多数情况下,最终会通过传入大量的属性,以便从外部更容易地控制和自定义组件。这并不坏,但是传递大量属性确实会变得有点麻烦和丑陋。我们以 vuetify 的按钮组件为例,它是最简单的组件之一。假设我们想要在大多数情况下传递相同的属性:

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

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

我们以 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> 

使用此技巧,我们无需在应用中的多个位置填充重复属性的模板,同时仍然可以使用受欢迎的模板标记。

总结

使用本文中提到的示例,可以简化将多个属性传递给组件的操作。这对于具有很多属性的表示性和第三方组件特别有用。

注意,这里使用的示例仅仅演示。如果想制作更加灵活可用的,可以根据具体情况使用更好的方法,例如创建自己的包装器组件。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UX设计之道

UX设计之道

[美] 昴格尔、[美] 钱德勒 / 孙亮 / 人民邮电出版社 / 2010-4 / 35.00元

《UX设计之道:以用户体验为中心的Web设计》可以看作是用户体验设计的核心参考书。无论是Web设计领域的创业者、项目管理者还是用户体验的策划者和实施者,或是有志于Web设计领域的学生,都应该了解《UX设计之道:以用户体验为中心的Web设计》中的知识。 用户是网站的根本,网站要达到自己的商业目标,必须满足目标用户的需求——这就是以用户体验为中心的网站设计。那么,用户需求从何而来?如何将用户需......一起来看看 《UX设计之道》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具