El proceso de empaquetado de componentes Vue

vue组件的定义

El componente es una de las características más poderosas de Vue.js
Los componentes pueden extender elementos HTML para encapsular código reutilizable
En un nivel alto, los componentes son elementos personalizados y el compilador de Vue.js le agrega funciones especiales
En algunos casos, los componentes también pueden representar elementos HTML nativos extendidos con características `js`
Todos los componentes también son instancias de Vue Vue, es posible aceptar los mismos objetos de opciones (excepto algunas opciones específicas del nivel de raíz) y proporcionar la misma función de enlace del ciclo de vida

vue组件的功能

Capacidad de abstraer la página en múltiples módulos relativamente independientes
Realice la reutilización del código, mejore la eficiencia del desarrollo y la calidad del código, y haga que el código sea fácil de mantener

Vue组件封装过程

Primero, cree un componente usando Vue.extend ()
Luego, use el método Vue.component () para registrar el componente
A continuación, si el componente hijo necesita datos, puede aceptar la definición en props
Finalmente, después de que el componente secundario haya modificado los datos, si desea pasar los datos al componente principal, puede usar el método emit ()

组件使用流程详细介绍

1. Creación de componentes: hay 3 métodos, extend ()
<template id = ''>
<script type = 'text / x-template' id = ''>

A. Llame a Vue.extend () para crear un componente llamado myCom, la plantilla define la etiqueta de la plantilla y el contenido de la plantilla debe escribirse debajo de la etiqueta


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

B. Para la creación de etiquetas, se debe agregar el atributo id
```
<template id="myCom">
    <div>这是template标签构建的组件</div>
</template>
```
C. <script type = 'text / x-template' id = 'myCom'>,
necesita agregar el atributo id, y también necesita agregar type = "text / x-template" ,
agregar esto es para decirle al navegador que no ejecute la compilación El código
```
<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>
```
2. Registrar componentes: hay 2 métodos, registro global, registro local
A1. Registro global: un registro (llame a Vue.component (nombre del componente, variable definida cuando se crea el componente)), que se puede usar en múltiples instancias de Vue.

Primero usamos el registro global para registrar el componente myCom creado en el ejemplo anterior

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

A2. Azúcar de sintaxis para el registro global: no es necesario crear un registro directo

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

'my-com' es un nombre personalizado para el componente, que se utilizará cuando se utilice, y myCom corresponde a la variable de componente construida anteriormente.

A3. Si es un componente creado con etiquetas de plantilla y script, el segundo parámetro se cambia al valor de id en su etiqueta.

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

B1. Registro parcial: solo se puede utilizar en la instancia donde el componente está registrado, un registro y un uso

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

B2. Azúcar sintáctico de registro parcial:

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

B3, componentes creados por <template> y <script>, registro parcial

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

3、调用组件

Simplemente escriba la etiqueta del nombre del componente donde se llama el componente

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

案例：

A. Registro global: cree un nuevo archivo html, importe vue.js y defina 2 instancias de vue app1 y 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>

显示效果：

Inserte la descripción de la imagen aquí

El proceso de empaquetado de componentes Vue

El proceso de empaquetado de componentes Vue

Supongo que te gusta