- Aprender
-
Ecosistema
Ayuda
Herramientas
Librerías Oficiales
Noticias
Lista de Recursos
- Equipo
- Apoyar Vue
- Traducciones
Guía
Conocimientos Esenciales
- Instalación
- Introducción
- La instancia Vue
- Sintaxis de Template
- Propiedades Computadas y Observadores
- Enlace Clases y Estilos
- Renderización Condicional
- Renderizado de lista
- Manejo de eventos
- Binding en Formularios
- Conceptos Básicos de Componentes
Transiciones & Animaciones
- Efectos de Transición
Componentes en Profundidad
- Registro de Componente
- Propiedades
- Eventos personalizados
- Slots
- Componentes Dinámicos & Asíncronos
- Handling Edge Cases
- Transiciones de estado
Reusabilidad & Composición
- Mixins
- Directivas Personalizadas
- Funciones de renderizado & JSX
- Plugins
- Filtros
- Publicación en Producción
Herramientas
- Componentes de un Solo Archivo (Single File Components)
- Testing Unitario
- Soporte TypeScript
Escalando la Aplicación
- Enrutamiento
- Administración del Estado
- Renderizado del lado de Servidor
Funcionamiento Interno
- Reactividad en profundidad
Migraciones
- Migración desde Vue 1.x
- Migración desde Vue Router 0.7.x
- Migración de Vuex 0.6.x a 1.0
Meta Documentación
- Comparación con otros frameworks
- Únete a la comunidad Vue.js!
- Conozca al equipo
Registro de Componente
Esta pagina asume que usted ya ha leído Componentes: Lo básico. Léalo primero si usted es nuevo con componentes.
Nombre del Componente
Cuando registramos un componente, siempre se le asignará un nombre. Por ejemplo, en el registro global hemos visto hasta ahora:
Vue.component('my-component-name', { /* ... */ }) |
El nombre del componentes es el primer argumento de Vue.component
.
El nombre que le dé a un componente puede depender de dónde pretenda utilizarlo. Cuando use un componente directamente en el DOM (a diferencia de en una string template o componente de un solo archivo), recomendamos encarecidamente seguir las reglas de W3C para nombres de tags personalizados (todo en minúsculas, debe contener un guión). Esto le ayuda a evitar conflictos con los elementos HTML actuales y futuros.
Usted puede ver otras recomenaciones para nombres de componentes en la Guía de Estilo.
Nomenclatura
Tiene dos opciones cuando define el nombre de un componente:
Con kebab-case
Vue.component('my-component-name', { /* ... */ }) |
Al definir un componente con kebab-case, también debe usar kebab-case al hacer referencia a su elemento personalizado, como en <my-component-name>
.
Con PascalCase
Vue.component('MyComponentName', { /* ... */ }) |
Cuando define un componente con PascalCase, puede usar cualquiera de los dos casos al hacer referencia a su elemento personalizado. Eso significa que tanto <my-component-name>
como <MyComponentName>
son aceptables. Sin embargo, tenga en cuenta que solo los nombres de casos de kebab son válidos directamente en el DOM (es decir, en las plantillas que no son string-template).
Registro Global
Hasta ahora, solo hemos creado componentes usando Vue.component
:
Vue.component('my-component-name', { |
Estos componentes son registrados globalmente. Lo que significa que ellos pueden ser usado en la plantilla de cual instancia raíz de Vue(new Vue
) creada después del registro. Por ejemplo:
Vue.component('component-a', { /* ... */ }) |
<div id="app"> |
This even applies to all subcomponents, meaning all three of these components will also be available inside each other.
Local Registration
Global registration often isn’t ideal. For example, if you’re using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.
In these cases, you can define your components as plain JavaScript objects:
var ComponentA = { /* ... */ } |
Then define the components you’d like to use in a components
option:
new Vue({ |
For each property in the components
object, the key will be the name of the custom element, while the value will contain the options object for the component.
Note that locally registered components are not also available in subcomponents. For example, if you wanted ComponentA
to be available in ComponentB
, you’d have to use:
var ComponentA = { /* ... */ } |
Or if you’re using ES2015 modules, such as through Babel and Webpack, that might look more like:
import ComponentA from './ComponentA.vue' |
Note that in ES2015+, placing a variable name like ComponentA
inside an object is shorthand for ComponentA: ComponentA
, meaning the name of the variable is both:
- the custom element name to use in the template, and
- the name of the variable containing the component options
Module Systems
If you’re not using a module system with import
/require
, you can probably skip this section for now. If you are, we have some special instructions and tips just for you.
Local Registration in a Module System
If you’re still here, then it’s likely you’re using a module system, such as with Babel and Webpack. In these cases, we recommend creating a components
directory, with each component in its own file.
Then you’ll need to import each component you’d like to use, before you locally register it. For example, in a hypothetical ComponentB.js
or ComponentB.vue
file:
import ComponentA from './ComponentA' |
Now both ComponentA
and ComponentC
can be used inside ComponentB
‘s template.
Automatic Global Registration of Base Components
Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as base components and they tend to be used very frequently across your components.
The result is that many components may include long lists of base components:
import BaseButton from './BaseButton.vue' |
Just to support relatively little markup in a template:
<BaseInput |
Fortunately, if you’re using Webpack (or Vue CLI 3+, which uses Webpack internally), you can use require.context
to globally register only these very common base components. Here’s an example of the code you might use to globally import base components in your app’s entry file (e.g. src/main.js
):
import Vue from 'vue' |
Remember that global registration must take place before the root Vue instance is created (with new Vue
). Here’s an example of this pattern in a real project context.