Vue.js

# Propiedades de Instancias

# $data

  • Tipo: Object

  • Detalles:

    El objeto de dato a que la instancia de componente está observando. La instancia de componente delega acceso a las propiedades en su objeto de dato.

  • Vea también: Opciones / Dato - data

# $props

  • Tipo: Object

  • Detalles:

    Un objeto representa las props actuales que un componente ha recibido. La instancia de componente delega acceso a las propiedades en su objeto de props.

# $el

  • Tipo: any

  • Solo de lectura

  • Detalles:

    El elemento DOM raíz que la instancia de componente está gestionando.

    Para componentes que utilizan fragments, $el será el nodo DOM de marcador de posición que Vue utilice para mantener un seguimiento del posición del componente dentro del DOM. Es recomendado utilizar refs de plantillas para accesar directamente a los elementos DOM en vez de dependerse de $el.

# $options

  • Tipo: Object

  • Solo de lectura

  • Detalles:

    Las opciones de instanciación utilizadas para la instancia actual de componente. Esta es útil cuando quiere incluir propiedades personalizadas en las opciones:

    const app = createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
    1
    2
    3
    4
    5
    6

# $parent

  • Tipo: Component instance

  • Solo de lectura

  • Detalles:

    La instancia padre, si la instancia actual tienen una.

# $root

  • Tipo: Component instance

  • Solo de lectura

  • Detalles:

    La instancia raíz de componente del árbol actual de componente. Si la instancia actual no tiene padres este valor va a ser sí mísmo.

# $slots

  • Tipo: { [name: string]: (...args: any[]) => Array<VNode> | undefined }

  • Solo de lectura

  • Detalles:

    Utilizada para programáticamente acceder contenidos distribuidos por slots. Cada slot nombrado tiene su propiedad correspondiente (p. ej. los contenidos de v-slot:foo se encontrarán en this.$slots.foo()). La propiedad default contiene nodos no incluidos en un slot nombrado o contenidos de v-slot:default.

    Acceder this.$slots es más útil cuando escribir un componente con una función render.

  • Ejemplo:

    <blog-post>
  <template v-slot:header>
    <h1>Sobre Mí</h1>
  </template>

  <template v-slot:default>
    <p>
      Aquí se encontra cierto contenido de la página, lo que será incluido en $slots.default.
    </p>
  </template>

  <template v-slot:footer>
    <p>Copyright 2020 Evan You</p>
  </template>
</blog-post>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const { createApp, h } = Vue
const app = createApp({})

app.component('blog-post', {
  render() {
    return h('div', [
      h('header', this.$slots.header()),
      h('main', this.$slots.default()),
      h('footer', this.$slots.footer())
    ])
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  • Vea también:

# $refs

  • Tipo: Object

  • Solo de lectura

  • Detalles:

Un objeto de elementos DOM y instancias de componente, registrado con atributos ref.

# $attrs

  • Tipo: Object

  • Solo de lectura

  • Detalles:

Contiene vinculaciones de atributos del alcance padre y eventos qe no son reconocidos (y extraídos) como props de componente o eventos personalizados. Cuando un componente no tiene ningunas props declaradas u eventos personalizados, este escencialmente contiene todas las vinculaciones del alcance padre, y puede pasarse a un comonente interior mediante v-bind="$attrs", es útil cuando se creen componentes de orden superior (higher-order components).

← Métodos de Instancias →