Cómo entender los componentes globales y los componentes locales en vue
La aparición de componentes en Vue tiene como objetivo dividir el volumen de código de las instancias de Vue, lo que nos permite usar diferentes componentes para dividir diferentes módulos funcionales. Cualesquiera que sean las funciones que necesitemos en el código, simplemente llamamos a los componentes correspondientes. A continuación, presentaré la diferencia entre componentes globales y componentes locales, que servirá como referencia y espero que sea de ayuda para todos.
Tutorial recomendado: tutorial de Vue
Los componentes globales se refieren a componentes que se pueden utilizar en cualquier parte de la aplicación, incluso en otros componentes.
Un componente local se refiere a un componente que no está registrado en el componente global, por lo que solo se puede utilizar en el componente donde está registrado.
Ejemplo:
& ltdiv id = " app " & gt
& ltContáctanos& gt& lt/Contáctanos& gt
</ div>Vue.component('contact-nos',{ data:function(){
Devolver {
Correo electrónico: "info@mycompany.com ”
};
},
Plantilla:` 1
& ltdiv & gt
& lth 1>Contáctenos</h 1> ;
& ltp >Envíe un correo electrónico a: { { email } } & lt/p & gt;
& lt/div & gt; }); new Vue({ El:' # app ',}); El componente en el código anterior es en realidad un componente global porque usamos el método del componente para registrarlo en el objeto Vue global. Esto significa que podemos usarlo como queramos.
Cómo configurar un componente global como componente local
Primero almacene el objeto del componente en una variable.
var contáctenos = { data:function(){
Volver {
Correo electrónico: "info@mycompany.com"
};
},
Plantilla:` 1
& ltdiv & gt
& lth 1 & gt;Contáctenos& lt/ h 1 & gt;
& ltp & gtEnvíe un correo electrónico a: { { email } } & lt/p & gt;
& lt/div & gt; >
`};Luego, en la instancia de Vue, podemos agregar un atributo de componente que contenga el componente que queremos registrar localmente. Esta propiedad debe ser un objeto y contener el nombre de etiqueta y los pares clave-valor del objeto de configuración.
Nuevo Vue({
el: ' #app ',
componente: {
'Contáctanos': Contáctanos
}}); tenga en cuenta que en este ejemplo, la propiedad de componentes se ha agregado a la instancia de Vue, pero también se puede agregar a otro componente.
Después de ejecutar el código, verá que el componente funciona correctamente. Sin embargo, para demostrar que el componente es local y no global, se agrega otra instancia de Vue y se cambia el selector de la instancia existente.
Nuevo Vue({
El: "# app 1",
Componente: {
'Contáctanos': Contáctanos
}}); new Vue({ El:' # app 2 ',}); & ltdiv id="app1 "
& ltContáctenos& gt& lt/Contáctenos& gt
& lt/div & gt;
& ltdiv id="app2 " >
& ltContáctenos& gt& lt/Contáctenos& gt
</div>
Ahora solo vemos el componente de contacto representado una vez, aunque usamos la etiqueta dos veces en la plantilla.
Aparece en la primera instancia de Vue porque lo hemos registrado como un componente local, pero la segunda instancia de Vue no sabe qué hacer con la etiqueta. Comprueba la consola de tu navegador. El navegador informa que el componente no está registrado.
Entonces, para registrar un componente global, use el método Vue.component, y para componentes locales, use la propiedad de componentes en la instancia de Vue u otro componente.
Resumen: