Componentes Vue.js

Un componente es una de las funcionalidades más potentes de Vue.js.

Los componentes pueden extender elementos HTML y encapsular código reutilizable.

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

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

Vue.component(tagName, options)

tagName es el nombre del componente y options son las opciones de configuración. Después del registro, podemos invocar el componente de la siguiente manera:

<tagName></tagName>

Componentes globales

Todas las instancias pueden usar componentes globales.

Ejemplo de componente global

Registra un componente global simple llamado ejemplo y úsalo:

<div id="app"> <ejemplo></ejemplo> </div> <script>// Registrar Vue.component('ejemplo', { template: '<h1>¡Componente personalizado!</h1>' }) // Crear la instancia raíz new Vue({ el: '#app' })</script>

Pruébalo »

Componentes locales

También podemos registrar un componente local en las opciones de la instancia, de modo que el componente solo pueda usarse en esa instancia:

Ejemplo de componente local

Registra un componente local simple llamado ejemplo y úsalo:

<div id="app"> <ejemplo></ejemplo> </div> <script> var Child = { template: '<h1>¡Componente personalizado!</h1>' } // Crear la instancia raíz new Vue({ el: '#app', components: { //<ejemplo>Solo estará disponible en la plantilla del padre 'ejemplo': Child } })</script>

Pruébalo »

Prop

prop es un atributo personalizado que el componente hijo utiliza para recibir los datos transmitidos por el componente padre.

Los datos del componente padre deben pasarse al componente hijo a través de props, y el componente hijo debe declarar explícitamente la "prop" mediante la opción props:

Ejemplo de Prop

<div id="app"> <child message="hello!"></child> </div> <script>// Registrar Vue.component('child', { // Declarar props props: ['message'], // También se puede usar como "this.message" en la instancia vm template: '<span>{{ message }}</span>' }) // Crear la instancia raíz new Vue({ el: '#app' })</script>

Pruébalo »

Prop dinámico

De manera similar a cómo se usa v-bind para vincular atributos HTML a una expresión, también se puede usar v-bind para vincular dinámicamente los valores 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"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script>// Registrar Vue.component('child', { // Declarar props props: ['message'], // También se puede usar como "this.message" en la instancia vm template: '<span>{{ message }}</span>' }) // Crear la instancia raíz new Vue({ el: '#app', data: { parentMsg: 'Contenido del componente padre' } })</script>

Pruébalo »

En el siguiente ejemplo se usa la directiva v-bind para pasar todo a cada componente repetido:

Ejemplo de Prop

<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Ejemplo' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

Pruébalo »

Nota: el enlace de prop es unidireccional: cuando las propiedades del componente padre cambian, se transmiten al componente hijo, pero no a la inversa.

Validación de Props

Los componentes pueden especificar requisitos de validación para las props.

Para personalizar la forma de validación de las props, puedes proporcionar un objeto con requisitos de validación para los valores de props, en lugar de un array 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 de la prop, Vue (en la versión de compilación de desarrollo) mostrará 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 mediante instanceof.

Otras extensiones