Vue base – 2

This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

You can’t write code until you’re full

In Vue Basics -1, a brief introduction of some commonly used Vue concepts, of course, the relevant content can also be expanded a lot. Today we will sum up the Vue component related knowledge.

A component.

What is a component? Usually an application is organized as a nested number of components: a header, a sidebar, a content area, etc., on a page, and each component contains other components, such as navigation links, blog posts, etc.

2. Use

Why componentization? High cohesiveness: Component functionality must be complete. For example, to implement a drop-down menu function, the components of the drop-down menu should implement all the functions required by the drop-down menu. Low coupling: In general terms, code independence does not conflict with other code in the project. In practical engineering, we may often involve the team cooperation, based on traditional lines of business to write code way will be very easy to conflict with each other, the modular approach can greatly avoid this kind of conflict, each component has its own clear responsibility, complete function, low coupling can also facilitate unit testing and use again. In general:

• Improve development efficiency
• Easy to reuse
• Simplify debugging steps
• Improve overall project maintainability
• Facilitate collaborative development

3. Registration

3.1 Global Registration

Create components with Vue.component:

Vue.componemt('my-component-name', {/ /... Options...
})
Copy the code

This way they can be used in the template of any newly created Vue root instance (new Vue) after registration.

<div id="app"> 
    <component-a></component-a> 
    <component-b></component-b> 
    <component-c></component-c> </div>

<script>
    Vue.component('component-a', {/ *... * /})
    Vue.component('component-b', {/ *... * /})
    Vue.component('component-c', {/ *... * /})
    new Vue({el:'#app'})
</script>

Copy the code

The same is true of all the child components, that is, the three components can also be used internally by each other.

3.2 Local Registration

Because the global registry is included in the final build result of the project when the component is not in use, this results in an unnecessary increase in the number of users downloading JS. So in these cases, you can define the component through a normal JS object and then define the component you want to use in the Components option.

    var ComponentA = { / *... * / } 
    var ComponentB = { / *... * / } 
    var ComponentC = { / *... * / }


    new Vue({ el: '#app'.components: {
        'component-a': ComponentA, 
        'component-b': ComponentB 
        } 
    })

Copy the code

For each property of the Components object, the property name is the name of the custom element, and the property value is the component’s option object. Note: Locally registered components are not available in their children. For example, if you want ComponentA to be available in ComponentB, write:

    var ComponentA = { / *... * / } 
    var ComponentB = {
        components: { 
            'component-a': ComponentA 
        }, // ... 
    }
Copy the code

Or use the ES2015 module with Babel and Webpack, as follows:

    import ComponentA from './ComponentA.vue' 
        export default { 
            components: { 
                ComponentA 
            }, // ... 
    }
Copy the code

Note that in ES2015+, putting a variable name like ComponentA in the object is actually ComponentA: ComponentA, which is short for “ComponentA”.

• The name of the custom element to use in the template
• The variable name that contains the component option