By Jover Morales

Translator: Front-end wisdom

Source: the alligator

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

As all developers who use component-based architectures such as Vue and React know, creating reusable components is difficult and, in most cases, ends up by passing in a number of properties that make it easier to control and customize components from the outside. That’s not bad, but passing lots of attributes can get a little messy and ugly.

Take vuetify’s button component, which is one of the simplest. Suppose we want to pass the same properties in most cases:

<v-btn
  color='primary'
  href='https://alligator.io'
  small
  outline
  block
  ripple
>
  Hello Meat
</v-btn>
Copy the code

It makes sense to put them in a separate file, which we’ll call props. Js

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

JSX and render functions

Since JSX and the Render function give us more functionality and flexibility at render time, passing multiple attributes at once is fairly easy.

In the render function:

import { buttonProps as props } from ‘./props.js’;

export default { render: h => h( ‘v-btn’, { props }, ‘Hello Meat’ ) };

In the JSX:

import { buttonProps as props } from './props.js';

const data = { props }

exportdefault { render: h => <v-btn {... data}>Hello Meat</v-btn> };Copy the code

Use the vue.js template

How about using the Vue Template? Don’t worry, it’s possible. All we need to do is use the V-bind directive. For objects that must be defined in the component’s Data option, it binds all properties

<template>
  <v-btn v-bind='buttonProps'>
    Hello Meat
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>
Copy the code

Using this technique, we don’t have to populate templates with duplicate attributes in multiple places in the application, and we can still use popular template tags.

conclusion

Using the examples mentioned in this article, you can simplify passing multiple properties to components. This is especially useful for presentation and third-party components with many attributes.

Note that the examples used here are illustrative only. If you want to make something more flexible and usable, you can use a better approach depending on the situation, such as creating your own wrapper component.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: alligator. IO/vuejs/passi…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.