Component development reasons

Front-end component-based development began in 200X, front-end development can not do without HTML/CSS/JS, early development page as the development unit, the three languages have their own characteristics, early lack of fixed norms, no constraints, brutal development. At the end of the day, the front-end developer and God knows what the written code means; After a month, god only knows what this code means.

Then the concept of front-end component is gradually generated in the minds of developers. From early YUI, ExtJS and Web Components, with the emergence of the three frameworks, componentized development has become a household word, with components as the basic abstract unit. React was invented to let people know that a component can be a function, breaking people’s original page-based understanding. By abstracting common logic functions into various components, it facilitates development calls, tests, and reduces the coupling between front-end logic and UI.

At present, popular component libraries, such as ANTD series and ElementUI, are developed for the middle background system, because the functions of the middle background system are relatively fixed, and the UI style requirements are not complicated. We can summarize some common components from the previous business logic and develop these components. Convenient in the background system development.

Component classification

Components can be divided into four categories:

1. Pure presentation components

This type of component can be a list or a table, which is mainly responsible for displaying server data to the user. The data is passed in and the component renders to generate the corresponding DOM.

2. Access components (interacting with the server)

Example: The Vue-Router is configured with mounted VUE components, and functions such as the bearer and server fetching and sending data are then passed layer by layer to the pure presentation components.

3. Interactive components

Examples: form components, time and date selection components, etc., contain more complex user interaction logic, a more general logic, emphasis on reuse.

4. Functional components

Abstract, providing some abstract functionality. Router-view and Transation components in vue-Router. A logical component that does not render anything itself and exists as an extension of the abstraction mechanism

Vue component development API

The two foundations of a component are props and Event.

Props: Passes props through the parent component. A simple component can convert props into a virtual DOM and render it into a DOM to present to the user.

Event: Components need to support custom events of some components in addition to browser native events to support UI interaction.

Slot: Components in the three frameworks are all functions. Only props and Event apis can be used to develop some simple components, and further API support is needed to develop complex components. React can directly use props to inherit components. So Vue provides the Slot API to compensate for the lack of template in this scenario.

In summary, the three major apis for VUE component development are props, Event, and Slot.

props

Here is a simple button example from the author of iView

<template> <button :class="'i-button-size' + size" @click="handleClick" :disabled="disabled" > <slot name="icon"></slot> Function oneOf(value, validList) {for (let I = 0; i < validList.length; i++) { if (value === validList[i]) { return true; } } return false; } export default { inheritAttrs: false, props: { size: { validator(value) { return oneOf(value, ["small", "large", "default"]); }, default: "default", }, disabled: { type: Boolean, default: false, }, }, created: function () { console.log(this.$attrs); }, methods: {handleClick(evt) {this.$emit("click", evt); ,}}}; </script>Copy the code

There are a few things to note here

1. To develop the component, you need to specify the types of props, set default values if possible, and add a validator function for parameter verification to improve the stability of the component.

With inheritAttrs: false and $attrs, we can manually control how attributes other than props are inherited. Note that inheritAttrs: False does not affect style and class inheritance

event

Unlike components and props, event naming is case sensitive, and kebab-case is recommended

Taking the click event in the Button component as an example, there are two ways to add a click event.

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick (event) {
        this.$emit('on-click', event);
      }
    }
  }
</script>
Copy the code

With $emit, you can emit a custom on-click event that is listened on at the parent level via @on-click

<i-button @on-click="handleClick"></i-button>
Copy the code

Declare directly at the parent level, but to distinguish native events from custom events, use the.native event modifier

<i-button @click.native="handleClick"></i-button>
Copy the code

Here is a simple version of the input component that I wrote

<template>
  <div class="fr-input" :class="[inputSize?'fr-input--' + inputSize:'']">
    <input
      class="fr-input__inner"
      :class="[inputSize?'fr-input__inner-'+inputSize:'']"
      :readonly="readonly"
      :value="value"
      @input="handleInput"
      @focus="handleFocus"
      v-bind="$attrs"
      autocomplete="off"
    />
  </div>
</template>
<script>
export default {
  name: 'FrInput',
  props: {
    value: [String, Number],
    readonly: Boolean,
    size: {
      type: String
    }
  },
  data() {
    return {
      focused: false
    }
  },
  computed: {
    inputSize() {
      return this.size
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value)
    },
    handleFocus(event) {
      this.focused = true
      this.$emit('focus', event)
    }
  }
}
</script>
Copy the code

The specific use

<fr-input V-model ="phoneNumber" type="text" name="name" spellCheck ="false" placeholder=" size="mform100" ></fr-input>Copy the code

Value =”value”@input=”handleInput” is a syntax sugar for v-model=”value”. After vue2.2, you can use the model option to customize prop and event

slot

In the Button component example in props, if you want to add text to the parent component, you use the default slot and the named slot=”icon”, which greatly extends the functionality of the component.

<i-icon slot="icon" type="checkmark"></i-icon>Copy the code

This article briefly introduces some concepts and reasons of componentized development as well as the specific use of VUE componentized development API. And then we’ll do some more in-depth study.