Cómo utilizar vue para registrar componentes
1. Introducción
El sistema de componentes es uno de los conceptos importantes en Vue.js. Proporciona una abstracción que nos permite construir utilizando componentes pequeños independientes y reutilizables. , cualquier tipo de interfaz de aplicación se puede abstraer en un árbol de componentes.
Entonces, ¿qué son los componentes?
Los componentes pueden ampliar elementos HTML y encapsular código HTML reutilizable. Podemos pensar en los componentes como elementos HTML personalizados.
2. Cómo registrar un componente
Hay tres pasos para usar componentes Vue.js: crear un constructor de componentes, registrar el componente y usar el componente.
Demostremos estos tres pasos usando código.
<! DOCTYPE html & gt
& lthtml & gt
& ltbody & gt
& ltp id = " aplicación " & gt
& ¡Es! -Nota: #app es un elemento montado por la instancia de Vue, y el componente debe usarse dentro del alcance del elemento montado ->
<My componente></my-component>
& lt/p & gt;
& lt/body & gt;
& ltscript src="ponente!& lt/p & gt;'
})
& lt! -2. Registre el componente y especifique la etiqueta HTML del componente es
Vue.component('mi componente', mi componente)<. /p>
<! -3. Montar por id = aplicación->
Nuevo Vue({
el:' #app '
});
& lt/script & gt;
& lt/html & gt;Los resultados de ejecución son los siguientes:
Registro global y registro local
Al llamar 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
p>Si. no se requiere el registro global, o el componente se usa en otros componentes, puede usar el atributo de componentes del objeto de opción para implementar el registro local.
Mi propio entendimiento es que siempre que sea un componente, representa un componente global, el componente representa un componente local
El ejemplo anterior se puede cambiar a registro local:
& lt! & lthtml & gt
p>& ltbody & gt
& ltp id = " app " & gt
& lt - ¡3.mi componente puede! solo se puede utilizar en # app-& gt;
& ltMy-component>& lt/my-component>
& lt/p & gt;
& lt /body >
& ltscript src = " js/vue . js " >& lt/script >
& ltscript>
// 1. Crear constructor de componentes
var myComponent = Vue.extend({
Plantilla: "& ltp & gt¡Este es mi primer componente!& lt/p >'
})
Nuevo Vue({
el:' #app',
Componente:{
// 2. Registrarse el componente myComponent en la instancia de Vue.
"Mi componente":Mi componente
}
});
& lt/script & gt;
} p>
& lt/html & gt; Debido a que el componente my-component está registrado en la instancia de Vue correspondiente al elemento #app, no se puede utilizar en otras instancias de Vue.
& ltp id="app2 "
& lt! - El componente my-component no se puede utilizar porque my-component es un componente local y pertenece a # app->
& ltMy componente>& lt/my-component>
</p> ;
<script>
nuevo Vue({
el:' #app2 '
});
& lt/script & gt; 2. Sintaxis de registro de componentes sugar
El método para registrar los componentes anteriores es un poco problemático. Para simplificar este proceso, Vue.js proporciona azúcar sintaxis de registro.
//Registro global, mi-componente1 es el nombre de la etiqueta.
vue . p>})
var vm1 = new Vue({
El: "# app 1"
vue.component() 1 El primer parámetro es el nombre de la etiqueta, y el segundo parámetro es el objeto de opción
De esta manera, Vue llamará automáticamente a Vue.extend()
p>El componente implementa el registro local
<. p>var vm2 = new Vue({el:' #app2 ',
Componente:{
p>//Registro local, mi-componente2 es el nombre de la etiqueta.
Mi componente 2':
Plantilla: "& ltp & gtEste es el segundo componente. ! </p>'
} ,
//Registro local, my-component3 es el nombre de la etiqueta
Mi componente 3 ':
Plantilla: "<p>¡Este es el tercer componente!</ p>'
}
}
}3. Componentes principales y componentes secundarios
Podemos definir y utilizar otros componentes en el componente, que constituye la relación entre los componentes padre e hijo
& lt
& lthtml & gt
& ltbody & gt
& ltparent componente& gt
& lt/parent-component >>p>
& lt/p & gt;
& lt/body & gt;
& ltscript src="ponent!& lt/p & gt;'
})
var Parent = Vue.extend({
//Usar
Plantilla: "<p>Este es el componente principal</p><child componente></child-component>',
Componente:{
//El registro local de componentes secundarios solo se puede utilizar dentro del componente principal
'Subcomponent':child
}<. /p>
})
//Registra globalmente el componente principal.
Vue.component('componente principal', padre)
new Vue({
el:' #app '
} )
& lt/script & gt;
& lt/html & gt;El resultado de ejecución de este código es el siguiente
Cuarto, use script o Etiqueta de plantilla
Aunque el azúcar sintáctico simplifica el registro de componentes, empalmar elementos HTML en las opciones de la plantilla es problemático, lo que también conduce a un alto acoplamiento entre HTML y JavaScript.
Afortunadamente, Vue.js proporciona dos métodos para separar las plantillas HTML definidas en JavaScript.
<! DOCTYPE html & gt
& lthtml lang = " en " & gt
& lthead & gt
& ltmeta charset="UTF-8 " >> p>
& lttitle & componente gtVue
& ltscript src = " js/vue . js " & gt;& lt/script & gt;
& lt/head & gt;
& ltbody & gt
& ltp id="app1 "
& ltmy-com & gt;& lt/my-com & gt ;
& ltmy-com 1 & gt;& lt/my-com 1 & gt;
& lt/p & gt;
& ltid de plantilla = " myCom " & gt
& ltp & gtEste es un componente creado a partir de etiquetas de plantilla
& lt/template & gt;
& ltscript type = " text/x-template " id = " mycom 1 "
& ltp & gtEste es un componente creado a partir de etiquetas de script
& lt/script & gt;
& ltscript src = " componentet(' my-com 1 ', {
Plantilla: "#myCom1"
});
var app1 = new Vue({
El: "# app 1",
Componente: {
my-com': {
Plantilla : "#myCom"
}
}
});
& lt/script & gt;
& lt/body & gt;
& lt/html & gt; Resultados de ejecución:
Nota: utilice
después de comprender la creación de componentes y después de proceso de registro, recomiendo usar
Esto mantiene el código HTML y el código JavaScript separados, fáciles de leer y mantener
5 Consideraciones de plantilla
1. Se utiliza como etiqueta secundaria en el componente principal
& ltp id = " app " & gt
& ltparent componente& gt
& ltchild componente & gt& lt. /child-component >>p>
& lt/parent-component >>p>
& lt/p & gt;Lo anterior es incorrecto. ¿Por qué este enfoque no funciona? Porque cuando un componente secundario se registra en un componente principal, Vue.js compilará la plantilla del componente principal y el contenido de la plantilla ya ha determinado el HTML que debe representar el componente principal.
<Componente principal>? & lt/parent-component >Equivalente al tiempo de ejecución, algunas de sus subetiquetas solo se ejecutarán como HTML normal
2. No se permiten las siguientes situaciones.
Plantilla:` & ltp & gtEste es un componente personalizado local que solo se puede usar en la instancia actual de Vue
& ltbutton & gtHola& lt/button & gt ;`
3. Los datos del componente deben ser una función.
La configuración pasada al registrar un componente es similar a la configuración pasada al crear una instancia de Vue, pero existen algunas diferencias. Una de ellas es que los atributos de los datos deben ser funciones.
Esto se debe a que si un objeto se pasa como una instancia de Vue, dado que la variable de tipo de objeto en JS en realidad contiene una referencia al objeto, cuando hay varios componentes de este tipo, los datos se compartirán. La entrada de datos en un componente provocará cambios en los datos de otros componentes.
Utilizando funciones que devuelven objetos, se creará un nuevo objeto cada vez que se utilice el componente, por lo que no habrá problema de * * * disfrutar de los datos.
4.Análisis de plantilla DOM
Cuando utilice DOM como plantilla (como montar la opción el en un elemento existente), estará limitado por HTML, porque Vue solo puede El contenido de la plantilla solo se puede obtener después de que el navegador analiza y normaliza el HTML. Especialmente estos elementos
El uso de estos elementos restringidos en componentes personalizados puede causar algunos problemas, como
& lttable>
& ltmy-row >... </my-row>
</table>Componente personalizado
<table>
& lttr is = " my-row " & gt; & gt;
& lt/table & gt; Es decir, en HTML estándar, ciertos elementos solo se pueden colocar en ciertos elementos secundarios, mientras que otros elementos solo pueden existir dentro de ciertos elementos principales. Por ejemplo, P no se puede colocar en la tabla, el elemento padre de tr no puede ser P, etc. Entonces, cuando se usan etiquetas personalizadas, el nombre de la etiqueta sigue siendo el nombre de esas etiquetas, pero puede completar el nombre del componente personalizado en el atributo is de la etiqueta.
En tercer lugar, componentes dinámicos
A veces es útil cambiar dinámicamente entre diferentes componentes, como en una interfaz de múltiples pestañas.
En pocas palabras: coloque varios componentes bajo un punto de montaje y luego decida cuál mostrar o no en función de una variable del componente principal.
Punto importante: use la etiqueta del componente en el punto de montaje y luego use v-bind:is="Nombre del componente", el nombre del componente coincidente se encontrará automáticamente. Si no, no se mostrará.
Componentes dinámicos, veamos primero el efecto del caso:
Demostración de código: el código CSS no se copiará, como se muestra en el efecto de ejemplo anterior.
& ltscript src = "/vue " & gt;& lt/script & gt;
& ltp id = " dinámica-componente-demo " class = " demo " >
& ltButton v-for="pestaña dentro de la pestaña"
v-bind:key="tab "
v-bind:class= "['tab -botón ', { activo: pestaña actual === pestaña }]"
v-on:click = " pestaña actual = pestaña " & gt; { { pestaña } } & lt/botón & gt;
& lt componente v-bind:is = " currentTabComponent " class = " tab " & gt; & lt/component & gt;
& lt/p & gt ;Aquí, v -bind:key es en realidad prescindible. Para obtener información detallada sobre las claves, consulte el sitio web oficial.
v-bind:class y v-on:click se utilizan aquí para cambiar el estilo.
La clave es la etiqueta del componente.
& ltScript& gt
//Muestra tres componentes definidos.
vue . /p>
Vue.component('tab - director ', {
Plantilla: "& ltp & gtUno con 50 directores
})
p>Vue.component('tab - Director ', {
Plantilla: "& ltp & gt1 * * * tiene 10 controladores
})
New Vue({
El:' #demostración de componentes dinámicos',
Datos: {
Etiqueta actual: "Director",
p>
Caracteres de tabulación: ['Jefe de Sección', 'Director', 'Director']
},
//Calcular atributos, juzgar la selección en función de los cambios en currentTab Qué componente.
Valor calculado:{
currentTabComponent: function(){
return 'tab-' + this.currentTab
}
}
})
& lt/script & gt; Creo que después de leer este caso, dominas el método. a Gxl para obtener más información interesante. Vaya a otros artículos relacionados.
Lectura recomendada:
¿Cuáles son las formas de usar js (con código)?
Cómo hacerlo. importar dinámicamente archivos JS