Cómo utilizar vue para registrar componentes
1. Introducción
El sistema de componentes es uno de los conceptos importantes de Vue.js. Proporciona una abstracción que nos permite utilizar componentes reutilizables independientes para crear aplicaciones grandes. cualquier tipo de interfaz de aplicación se puede resumir en un árbol de componentes
Entonces, ¿qué son los componentes?
Los componentes amplían los elementos HTML y encapsulan código HTML reutilizable; podemos pensar en los componentes como elementos HTML personalizados.
En segundo lugar, cómo registrar un componente
Hay 3 pasos para usar un componente en Vue.js: crear un constructor de componentes, registrar el componente y usar el componente.
El siguiente código demuestra estos tres pasos
lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;bodygt; /p>
lt; p id="appgt;
lt;!-- Nota: #app es el elemento montado por la instancia de Vue y debe usarse dentro del alcance del elemento montado. - gt;
lt;mi-componentegt;lt;/mi-componentegt;
lt;/pgt;
lt;/bodygt
lt;script src="ponent!lt;/pgt;'
})
lt;! -- 2. Registre el componente y especifique la etiqueta del componente. La etiqueta HTML del componente es lt; my-componentgt;
Vue.component('my-component', myComponent)
lt; !-- 3. Instalar a través de id=app --gt
new Vue({
el: '#app'
} );
lt;/scriptgt;
lt;/htmlgt; Los resultados obtenidos son los siguientes:
I. Registro global y local
Cuando llamas a Vue.component() para registrar un componente, el registro del componente es global, lo que significa que el componente se puede utilizar en cualquier ejemplo de Vue.
Si no necesita el registro global, o si desea utilizar el componente en otros componentes, puede habilitar el registro local utilizando la propiedad de componentes del objeto de opciones.
Según tengo entendido, siempre que sea un componente, es un componente global y los componentes son componentes locales.
El ejemplo anterior se puede cambiar a registro local:
lt ;!DOCTYPE htmlgt;
lt;htmlgt;
lt! -- 3. my-component solo se puede usar bajo #app --gt;
lt;my-componentgt;lt;/my-componentgt;
lt;/pgt;
lt;/bodygt;
lt;!script src="js/vue.js"gt;lt;/scriptgt;
lt;scriptgt;
// 1. Crear constructor de componentes
var myComponent = Vue.extend({
plantilla: 'lt;pgt;¡Este es mi primer componente! lt ;/pgt;'
})
nuevo Vue({
el: '#app',
componentes: {
// 2. Regístrese en la instancia de Vue
'my-component': myComponent
}
});
p>
lt;/scriptgt;
lt;/htmlgt; Dado que el componente my-component está registrado en el elemento #app, no se puede utilizar en otras instancias de Vue.
lt;p id="app2"gt;
lt;! -- No puedes usar el componente my-component porque my-component es parte de #app --gt;
lt;my-componentgt;lt;/my-componentgt;
lt;/pgt;
lt;/pgt;
.lt;/scriptgt;
new Vue({
el： '#app2'
});
lt; /scriptgt; II. Azúcar sintáctico de registro de componentes
El método de registro de componentes anterior es un poco engorroso, Vue. .js proporciona azúcar de sintaxis de registro para simplificar el proceso.
// Registro global, my-component1 es el nombre de la etiqueta
Vue.component('my-component1', {
plantilla: 'lt; pgt ; ¡Este es el primer componente!
})
var vm1 = new Vue({
el: '#app1'
} ) El primer argumento de Vue.component() es el nombre de la etiqueta y el segundo argumento es un objeto de opciones que define la plantilla del componente utilizando la propiedad de plantilla del objeto de opciones.
Al utilizar este enfoque, Vue llamará automáticamente a Vue.extend() detrás de escena.
El componente implementa el registro local
var vm2 = new Vue({
el: '#app2',
componentes: {
// Registro local, mi-componente2 es el nombre de la etiqueta
'mi-componente2': {
plantilla: 'lt; segundo componente!lt;/pgt;'
},
// Registro local, mi-componente3 es el nombre de la etiqueta
'mi-componente3': {
Plantilla: 'lt;pgt;¡Este es el tercer componente!lt;/pgt;'
}
}
}
}Tres: Componentes principales y subcomponentes
Podemos definir y utilizar otros componentes, lo que constituye la relación entre los componentes principales y los subcomponentes
lt;htmlgt;
lt;bodygt;
lt;p id="app"gt;
lt ;parent-componentgt;
lt;/parent-componentgt;
lt;/pgt;
lt;/bodygt;
lt;script src="ponent!
var Parent = Vue. extend({
// Utilice la etiqueta lt;child-componentgt; dentro del componente principal
plantilla: 'lt;pgt;Este es un componente principallt;/pgt;lt;child- componentegt;/pgt;lt;/child-componentgt;',
componentes: {
// Componente hijo parcialmente registrado, solo se puede utilizar en componentes padres
'child-component': Child
}
})
// Registrar globalmente el componente principal
Vue.component('parent-component', Parent)
new Vue({
el : '#app'
})
lt;/scriptgt;
lt;/htmlgt; Este código se ejecuta de la siguiente manera
Cuatro: uso de etiquetas de script o plantilla
Aunque el azúcar de sintaxis simplifica el registro de componentes, empalmar elementos HTML en las opciones de plantilla es más engorroso, lo que conduce a un alto grado de acoplamiento entre HTML y JavaScript.
Afortunadamente, Vue.js proporciona dos métodos para separar las plantillas HTML definidas en JavaScript.
lt;!DOCTYPE htmlgt;
lt;html lang="es"gt;
lt;headgt;
lt; meta charset="UTF-8"gt;
lt;titlegt.vue componentelt;/titlegt;
lt;scriptrc="js/vue.template id="myCom" gt ;
lt;pgt; Este es un componente creado a partir de etiquetas de plantilla lt;/pgt;
lt;/templategt;
lt;script type= " text/x-template" id="myCom1"gt;
lt.pgt; Este es el componente creado por la etiqueta de script lt;/pgt;
lt;/scriptgt ;
lt; script src="ponent('mi-com1', {
plantilla: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
componentes: {
'my-com': {
plantilla: '#myCom'
}
}
}
});