Componentization of Vue

Componentization of Vue

Componentization is the essence of Vue, and Vue is composed of components one by one. Vue's componentized design has a lot of content. When I was interviewed, I was asked: Tell me about your understanding of Vue's componentization. At this time, there may be no way to start, so here is my personal understanding of Vue's componentization.

Classification of components

Generally speaking, components can be roughly divided into three categories:

1. Page-level components.
2. Business-reusable basic components.
3. Independent components that have nothing to do with the business.

Page level components

Page-level components, usually .vue components in the pages directory, are a large page that composes the entire project. Generally, there will be no external interface. When we usually develop, we mainly write such components. As shown below: Home.vue (home page) and About.vue (about us) under pages are both independent pages and independent components.

  pages
  ├─ About.vue
  └─ Home.vue

Business reusable basic components

This type of component is usually a component that is reused by each page in the business. This type of component is usually written in the components directory, and then used in each page through import. This type of component usually implements a certain function, such as a scoring system used on each page in a takeaway. This part can realize the scoring function and can be written as an independent business component. For example, Star.vue in the components below is a business component. The writing of this type of component usually involves components commonly used props, slotand custom events.

  components
  └─ Star.vue

Independent components that have nothing to do with the business

Such components are usually independent components that have nothing to do with business functions. Such components are usually used as basic components in various business components or page components. The components included in the popular ElementUI and iview on the market are all independent components. If it is a self-defined independent component, such as a rich text editor, it is usually written in the utils directory.

Component writing

After talking about the classification of components, let's talk about the preparation of components. To write a component, we need to consider what factors. First of all, the two most important components of a component must be data and events . In addition, the component development should consider scalability, and your expansion in Vue is implemented through slots .
Data mainly refers to: data and prop . Among them, data is mainly used for data display inside the component, usually a function. And prop is to receive external data, which involves data verification, data expansion, etc., which is a very important API.

Event : The event of a component is different from binding events on ordinary elements. How the component event should be triggered, whether it is triggered in the parent component or on the internal element of the component.

slot : Mainly used for component expansion. It is also a very important API for component development.

To sum up: there are three very important APIs in component development, which can be jokingly called the three elements of component development: prop , event and slot . Next, we will separately describe the use of these three APIs from the perspective of component development. It's not just simple use.

Property prop

propDefines which configurable properties the component can receive. Mainly used to receive the data passed by the parent component. When props receives properties, it can be in the form of an array or an object. If it does not involve type checking or other checks, you can directly use the array format, if it involves checking, it is better to use the object format.
Array form:

props:['name','age']

Object form: Using the object form, you can verify the type of data, whether it is required, and other characteristics. This is very beneficial for componentized development.
Child.vue defines components

<template>
  <div class="container">
    姓名：{
    
    {name}}
    年龄：{
    
    {age}}
    <button :class = "type">点击</button>
  </div>
</template>

<script>
export default {
name:‘Child’,
props:{
name:{
type:String,
require:true
},
age:{
type:Number
},
type:{
//校验： 判断type是否是success,warning和primary之一。
validator:function(value){
return ([‘success’,‘warning’,‘primary’].indexOf(value)) > -1
}
}
}
}
</script>

Parent.vue uses components

<Child :name = name  :age = age :type = type></Child>

When defining a component, name is of type String and is required, age is of type number and is not required. The type must be one of success, warning and primary.

Custom event

How to trigger the event defined on the component:
Suppose we need to add a click event to the Child component we defined: At this time, we usually
trigger the event through $emit on the button inside the component , and then listen in the parent component.
Define the event through $emit in the component:
Child.vue

<template>
  <div class="container">
    姓名：{
   
   {name}}
    年龄：{
   
   {age}}
    <!-- 触发事件 -->
    <button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
  </div>
</template>

Parent.vue listening event

 <Child @onClick = 'handleClick' :age = age :type = type></Child>

slot

The components we define are usually used in various places, but they may not be able to meet all usage scenarios. Sometimes we need
to expand some functions. At this time, slot is needed. One sentence description slot: is used to insert new content in the component .
For example, in the Child component we just defined, we need to insert a paragraph. Then you need to use slot at this time.
Use slot in Child.vue

<template>
  <div class="container">
    姓名：{
   
   {name}}
    年龄：{
   
   {age}}
    <button @click ="$emit('onClick','自定义事件')" :class = "type">点击</button>
    <slot></slot>
  </div>
</template>

Extended functions in Parent.vue. Insert a paragraph:

<template>
  <div class="container">
    <Child @onClick = 'handleClick' :age = age :type = type>
      <div>这是通过slot插入的一段话</div>
    </Child>
  </div>
</template>

As shown above: when slot is used in Child.vue and CHild is used in Parent.vue, a paragraph is inserted.
Realized the expansion of the function. Of course, if you need to expand more functions, you can use the named slot, which is not specifically introduced here.

to sum up:

Classification of components:

1. Page-level components
2. Business reusable basic components
3. Independent functional components not related to business

The three elements of component development
prop , custom events, slotare the three important factors that make up the component.

1. propUsed to define the properties of the component.
2. Custom events are used to trigger events of components.
3. slotIt is used for the expansion of component functions.

By using these three APIs reasonably, we can better help us develop components.