Componentes Vue3

Cada componente Vue es una instancia independiente de Vue, con su propia plantilla, datos, métodos y ciclos de vida, lo que permite que el componente defina y gestione de manera autocontenida sus propias funciones y estilos.

El componente (Component) es una de las funcionalidades más potentes de Vue.js.

Los componentes pueden extender los elementos HTML, encapsular código reutilizable y ayudarte a dividir la interfaz de usuario en partes independientes y reutilizables.

Cada componente de Vue es una instancia independiente de Vue, con su propia plantilla, datos, métodos y ciclos de vida, lo que permite que el componente defina y gestione de manera autocontenida sus propias funciones y estilos.

Características y ventajas de los componentes Vue

  • Reutilización: Los componentes pueden usarse varias veces en diferentes lugares, mejorando la reutilización y la mantenibilidad del código.
  • Encapsulación: Cada componente tiene un ámbito independiente, puede encapsular su propio estado y lógica, evitando la contaminación global.
  • Composición: Se pueden construir interfaces complejas combinando múltiples componentes pequeños.
  • Reactividad: Los datos del componente están vinculados reactivamente a la vista, y cuando los datos se actualizan, la vista se actualiza automáticamente.
  • Modularidad: Admite desarrollo modular, y se puede utilizar una cadena de herramientas moderna de frontend para construir y gestionar.

El sistema de componentes nos permite construir aplicaciones grandes con componentes pequeños independientes y reutilizables. La interfaz de casi cualquier tipo de aplicación puede abstraerse como un árbol de componentes:

Cada aplicación Vue se crea mediante la función createApp. Las opciones pasadas a createApp se utilizan para configurar el componente raíz. Cuando montamos la aplicación, ese componente se utiliza como punto de partida para el renderizado.

Una aplicación necesita ser montada en un elemento DOM.

En el siguiente ejemplo, montamos la aplicación Vue en

, se debe pasar #app:

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

El formato de sintaxis para registrar un componente global es el siguiente:

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-namees el nombre del componente,/* ... */la parte es la opción de configuración. Después del registro, podemos usar la siguiente manera para llamar al componente:

<my-component-name></my-component-name>

Un ejemplo de un componente Vue simple:

Ejemplo de componente global

Registre un componente global simple llamado ejemplo y úselo:

<div id="app"> <ejemplo></ejemplo> </div> <script>// Crear una aplicación Vue const app = Vue.createApp({}) // Definir un nuevo componente global llamado ejemplo app.component('ejemplo', { template: '<h1>¡Componente personalizado!</h1>' }) app.mount('#app') </script>

Pruébalo »

A continuación, registramos otro componente button-counter, y después de cada clic, el contador aumentará en 1:

Ejemplo

// Crear una aplicación Vue
const app = Vue.createApp({})

// Definir un nuevo componente global llamado button-counter
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
Has hecho clic{{ count }}veces!
    </button>`
})
app.mount('#app')
</script>

Pruébalo »

Nota: En template`son backticks (acentos graves), no comillas simples'。

Reutilización de componentes

Puedes reutilizar el componente tantas veces como quieras:

Ejemplo

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Pruébalo »

Componente global

En los ejemplos anteriores, nuestros componentes están registrados globalmente solo mediante component.

Los componentes registrados globalmente se pueden utilizar en las plantillas de la instancia de la aplicación creada posteriormente, incluidos también los componentes secundarios en el árbol de componentes de la instancia raíz.

Ejemplo de componente global

Registre un componente global simple llamado ejemplo y úselo:

<div id="app"> <ejemplo></ejemplo> </div> <script>// Crear una aplicación Vue const app = Vue.createApp({}) // Definir un nuevo componente global llamado ejemplo app.component('ejemplo', { template: '<h1>¡Componente personalizado!</h1>' }) app.mount('#app') </script>

Pruébalo »

Componente local

El registro global a menudo no es lo ideal. Por ejemplo, si usas un sistema de construcción como webpack, registrar globalmente todos los componentes significa que, incluso si ya no usas un componente, seguirá incluido en el resultado final de la construcción. Esto provoca un aumento innecesario del JavaScript que los usuarios descargan.

En estos casos, puedes definir el componente mediante un objeto JavaScript normal:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

Luego, define los componentes que deseas usar en la opción components:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Para cada propiedad en el objeto components, el nombre de la propiedad es el nombre del elemento personalizado (component-a, component-b), y su valor es el objeto de opciones de ese componente (ComponentA, ComponentB).

También podemos registrar componentes locales en las opciones de la instancia, de modo que el componente solo se puede usar en esta instancia:

Ejemplo de componente local

Registre un componente local simple llamado ejemploA y úselo:

<div id="app"> <ejemplo-a></ejemplo-a> </div> <script> var ejemploA = { template: '<h1>¡Componente personalizado!</h1>' } const app = Vue.createApp({ components: { 'ejemplo-a': ejemploA } }) app.mount('#app') </script>

Pruébalo »

Componente de un solo archivo (archivo .vue)

El uso de componentes de un solo archivo permite organizar y gestionar mejor los componentes de Vue. Un componente generalmente consta de tres partes: plantilla, script y estilos.

Ejemplo

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* Estilos privados del componente */
p {
  color: blue;
}
</style>

Prop

prop es un atributo personalizado que el componente hijo usa para recibir los datos que el componente padre le pasa.

Los datos del componente padre deben pasarse al componente hijo mediante props. El componente hijo necesita declarar explícitamente el "prop" con la opción props:

Ejemplo de Prop

<div id="app"> <site-name title="Google"></site-name> <site-name title="Ejemplo"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </script>

Pruébalo »

Por defecto, un componente puede tener cualquier cantidad de props, y cualquier valor puede pasarse a cualquier prop.

Prop dinámico

De manera similar a usar v-bind para enlazar un atributo HTML a una expresión, también se puede usar v-bind para enlazar dinámicamente el valor de las props a los datos del componente padre. Cada vez que los datos del componente padre cambian, ese cambio también se transmite al componente hijo:

Ejemplo de Prop

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Ejemplo' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

Pruébalo »

Validación de props

Un componente puede especificar requisitos de validación para las props.

Para personalizar la forma de validación de los props, puedes proporcionar a los valores de props un objeto con requisitos de validación, en lugar de un arreglo de cadenas. Por ejemplo:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Cuando falla la validación del prop, Vue (en la versión de compilación de desarrollo) generará una advertencia en la consola.

type puede ser uno de los siguientes constructores nativos:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

type también puede ser un constructor personalizado, que se detecta usando instanceof.

Otras extensiones