# Dato

# data

Tipo: Function
Detalles:

La función que retorna un objeto de dato para la instancia del componente. En data, no recomendamos observar objetos que poseen sus comportamientos propios con estado como los objetos de API del navegador y las propiedades de prototype. Una buena idea sería mantener aquí solo un objeto plano que represente los datos del componente.

Una vez observado, ya no puede agregar propiedades reactivas al objeto raíz de dato. Por lo tanto, es recomendado declarar todas propiedades reactivas de nivel raíz por adelantado, antes de crear la instancia.

Después de que se ha creado la instancia, el objeto original de dato puede ser accesado como vm.$data. La instancia del componente también delega todas las propiedades encontradas en el objeto de dato, así que vm.a será equivalente a vm.$data.a.

Las propiedades que empiezan con _ o $ no serán delegadas en la instancia del componente porque pueden entrar en conflicto con las propiedades internales y métodos de API de Vue. Tendrá que accederlas como vm.$data._property.

Ejemplo:

// crear una instancia directamente
const data = { a: 1 }

// El objeto es agregado a una instancia de componente
const vm = createApp({
  data() {
    return data
  }
}).mount('#app')

console.log(vm.a) // => 1

1
2
3
4
5
6
7
8
9
10
11

Note que si utiliza una función de flecha con la propiedad data, this no será la instancia del componente, pero puede también acceder la instancia como el primero argumento de la función:

data: vm => ({ a: vm.myProp })

Vea también: Reactividad en profundidad

# props

Tipo: Array<string> | Object
Detalles:

Una lista/hash de atributos que son expuestos para aceptar dato del componente padre. Tiene una sintaxis simple basada de Array y una sintaxis alternativa basada de Object que permite configuraciones avanzadas tales como comprobación de tipos, validación personalizada y valores por defecto.

Con la sintaxis basada de Object, puede utilizar las siguientes opciones:
- type: puede ser uno de los siguientes constructores nativos: String, Number, Boolean, Array, Object, Date, Function, Symbol, cualquiera función de constructor personalizada u una matriz de estos. Comprobará si una prop tiene un tipo dado, y lanzará una advertencia si no lo tiene. Más información sobre tipos de prop.
- default: any Especifica un valor por defecto para la prop. Si la prop no es pasada, este valor será utilizado en su lugar. Los valores por defecto de objeto or matriz deben retornarse de una función de fábrica.
- required: Boolean Define si la prop es requerida. En un entorno que no es de producción, una advertencia de consola será lanzada si este valor es verdadero y la prop no es pasada.
- validator: Function Función personalizada de validador que toma el valor de la prop como el argumento solo. En un entorno que no es de producción, una advertencia será lanzada si esta función retorna un valor falso (es decir, se falla la validación). Puede leer más sobre la validación de prop aquí.

Ejemplo:

const app = createApp({})

// la sintaxis simple
app.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// La sintaxis de objeto con validación
app.component('props-demo-advanced', {
  props: {
    // comprobación de tipo
    height: Number,
    // comprobación de tipo más otras validaciones
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: value => {
        return value >= 0
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Vea también: Props

# computed

Tipo: { [key: string]: Function | { get: Function, set: Function } }
Detalles:

Las propiedades computadas para ser fundidas en la instancia de componente. Todos captadores y establecedores tienen sus contextos de this automáticamente vinculados a la instancia de componente.

Note que si utiliza una función de flecha con una propiedad computada, this no será la instancia de componente, pero puede también acceder la instancia como el primero argumento de la función:
```
computed: {
  aDouble: vm => vm.a * 2
}
```
1
2
3
Las propiedades computadas son almacenadas en cache, y solo recalculadas cuando se cambien las dependencias reactivas. Note que si una cierta dependencia es afuera del alcance de la instancia (es decir, no reactiva), la propiedad computada no será actualizada.

Ejemplo:

const app = createApp({
  data() {
    return { a: 1 }
  },
  computed: {
    // solo captador
    aDouble() {
      return this.a * 2
    },
    // captador y establecedor
    aPlus: {
      get() {
        return this.a + 1
      },
      set(v) {
        this.a = v - 1
      }
    }
  }
})

const vm = app.mount('#app')
console.log(vm.aPlus) // => 2
vm.aPlus = 3
console.log(vm.a) // => 2
console.log(vm.aDouble) // => 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Vea también: Propiedades Computadas

# methods

Tipo: { [key: string]: Function }
Detalles:

Métodos para ser fundidas en la instancia de componente. Puede acceder estos métodos directamente en la instancia VM, o utilizarlos en expresiones directivas. Todos métodos tendrán sus contextos de this automáticamente vinculados a la instancia de componente.

Note

Note que no debe utilizar una función de flecha para definir un método (p. ej. plus: () => this.a++). La razón es que las funciones de flecha vinculan al contexto padre, así que this no será la instancia de componente como usted espere y this.a será undefined.

Ejemplo:

const app = createApp({
  data() {
    return { a: 1 }
  },
  methods: {
    plus() {
      this.a++
    }
  }
})

const vm = app.mount('#app')

vm.plus()
console.log(vm.a) // => 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vea también: Manejo de Eventos

# watch

Tipo: { [key: string]: string | Function | Object | Array}
Detalles:

Un objeto dónde las claves son propiedades reactivas para observar, los ejemplos incluyen propiedades de data o computed, y los valores son los callbacks correspondientes. El valore puede también ser una cadena de caracteres del nombre de un método, o un objeto que contiene opciones adicionales. La instancia de componente llamará $watch() para cada entrada del objeto cuando se instancie. Vea $watch para más información sobre las opciones deep, immediate y flush.

Ejemplo:

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // Observar propiedades de nivel superior
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // nombre de método de cadena de caracteres
    b: 'someMethod',
    // el callback será llamado siempre que cualquiera de las propiedades del objeto observado se cambie, sin tener en cuenta sus profundidades anidadas.
    c: {
      handler(val, oldVal) {
        console.log('c se ha cambiado')
      },
      deep: true
    },
    // Observar una sola propiedad anidada:
    'c.d': function (val, oldVal) {
      // hacer algo
    },
    // el callback será llamado inmediatamente después del inicio de la observación
    e: {
      handler(val, oldVal) {
        console.log('e se ha cambiado')
      },
      immediate: true
    },
    // puede pasar una matriz de callbacks, serán llamado uno por uno
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 disparado')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 disparado')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b se ha cambiado')
    },
    handle1() {
      console.log('handle 1 disparado')
    }
  }
})

const vm = app.mount('#app')

vm.a = 3 // => new: 3, old: 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Note

Note que no debe utilizar una función de flecha para definir un observador (p. ej. searchQuery: newValue => this.updateAutocomplete(newValue)). La razón es que las funciones de flecha vinculan al contexto padre, así que this no será la instancia de componente como usted espere y this.updateAutocomplete será undefined.

Vea también: Observadores

# emits

Tipo: Array<string> | Object
Detalles:

Una lista/hash de eventos personalizados que pueden ser emitidos del componente. Tiene una sintaxis simple basada de Array y una sintaxis alternativa basada de Object que permite configurar una validación de evento.

En la sintaxis basada de Object, el valor de cada propiedad puede ser tanto null como una función de validador. La función de validación recibirá los argumentos adicionales pasados a la llamada $emit. Por ejemplo, si this.$emit('foo', 1) es llamado, el validador correspondiente para foo recibirá el argumento 1. La función de validador debe retornar un booleano para indicar si los argumentos de evento sean válidos o no.

Uso:

const app = createApp({})

// La sintaxis de Array
app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})

// la sintaxis de Object
app.component('reply-form', {
  emits: {
    // sin validación
    click: null,

    // con validación
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`¡Cargamento inválido de evento submit!`)
        return false
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Note

Eventos enumerados en la opción emits no serán heredados por el elemento raíz del componente y también serán excluidos de la propiedad $attrs.

Vea también: Herencia de Atributos

# expose 3.2+

Tipo: Array<string>
Detalles:

Una lista de propiedades para exponer en la instancia pública del componente. A list of properties to expose on the public component instance.

Por defecto, la instancia pública accesada mediante $refs, $parent, o $root es la mísma como la instancia internal de componente utilizada por la plantilla. La opción expose limita las propiedades que puedan ser accesadas mediante la instancia pública.

Las propiedades definidas por Vue mismo, tales como $el y $parent, serán siempre disponibles en la instancia pública y no necesitan ser enumeradas.

Uso:

export default {
  // _increment_ será expuesto pero _count_
  // será solo disponible internalmente
  expose: ['increment'],

  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Vea también: defineExpose

← API Global DOM →