The process of Vue component packaging

vue组件的定义

Component is one of the most powerful features of Vue.js
Components can extend HTML elements to encapsulate reusable code
At a high level, components are custom elements, and the Vue.js compiler adds special functions to him
In some cases, components can also represent native HTML elements extended with `js` features
All components also are Vue Vue instance, it is possible to accept the same options objects (except for some root level-specific options), and provide the same lifecycle hook function

vue组件的功能

Ability to abstract the page into multiple relatively independent modules
Realize code reuse, improve development efficiency and code quality, and make code easy to maintain

Vue组件封装过程

First, create a component using Vue.extend()
Then, use the Vue.component() method to register the component
Next, if the child component needs data, it can accept the definition in props
Finally, after the child component has modified the data, if you want to pass the data to the parent component, you can use the emit() method

组件使用流程详细介绍

1. Component creation-there are 3 methods, extend()
<template id=''>
<script type='text/x-template' id=''>

A. Call Vue.extend() to create a component named myCom, template defines the label of the template, and the content of the template needs to be written under the label


var myCom = Vue.extend({
    template: '<div>这是我的组件</div>'
})

B. For label creation, id attribute needs to be added
```
<template id="myCom">
    <div>这是template标签构建的组件</div>
</template>
```
C. <script type='text/x-template' id='myCom'>,
need to add id attribute, and also need to add type="text/x-template" ,
adding this is to tell the browser not to execute the compilation The code
```
<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>
```
2. Register components-there are 2 methods, global registration, local registration
A1. Global registration: one registration (call Vue.component (component name, the variable defined when the component is created)), which can be used in multiple Vue instances.

We first use global registration to register the myCom component created in the above example

Vue.component('my-com',myCom)

A2. Syntax sugar for global registration: no need to create direct registration

Vue.component('my-com',{
    'template':'<div>这是我的组件</div>'
})

'my-com' is a custom name for the component, which will be used when it is used, and myCom corresponds to the component variable constructed above.

A3. If it is a component built with template and script tags, the second parameter is changed to the id value on their tag

Vue.component('my-com',{
    template: '#myCom'
})

B1. Partial registration: it can only be used in the instance where the component is registered, one registration and one use

var app = new Vue({
    el: '#app',
    components: {
        'my-com': myCom
    }
})

B2. Partial registration syntactic sugar:

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '<div>这是我的组件</div>'
        }
    }
})

B3, components created by <template> and <script>, partial registration

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '#myCom'
        }
    }
})

3、调用组件

Just write the label of the component name where the component is called

<div>
    /*调用组件*/
    <my-com></my-com>
</div>

案例：

A. Global registration: create a new html file, import vue.js, and define 2 vue instances app1 and app2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app1">
        <my-com></my-com>
    </div>
    <div id="app2">
        <my-com></my-com>
    </div>
 
    <script>
        /*创建组件*/
        var myCom = Vue.extend({
       
       
            template: '<div>这是我的组件</div>'
        });
        /*全局注册组件*/
        Vue.component('my-com',myCom);
 
        /*定义vue实例app1*/
        var app1 = new Vue({
       
       
            el: '#app1'
        });
 
        /*定义vue实例app2*/
        var app2 = new Vue({
       
       
            el: '#app2'
        });
    </script>
</body>
</html>

显示效果：

Insert picture description here

The process of Vue component packaging

The process of Vue component packaging

Guess you like