Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de referencia de Vue 3

 En este ejemplo, aprenderemos sobre la ref()función en Vue 3.

En Vue 3, puede usar la ref()función para definir una variable reactiva.

Declaración de variables reactivas a partir de primitivas

Ref se utiliza para declarar variables reactivas de tipos primitivos como:

  • Cuerda
  • Número
  • Empezando
  • Booleano
  • Símbolo
  • Nulo
  • Indefinido

Por ejemplo:

import { ref } from "vue";

export default {
  setup() {
    const name = ref("");
    const num = ref(1);
    const bool = ref(true);
    const n = ref(null);
  }
};

Ejemplo de referencia de Vue 3

Ahora, consideremos este componente de Vue 3:

<template>
  <h1></h1>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const productName = ref("Product 001");

      return { productName };
    }
  };
</script>

La ref()función toma un valor y devuelve un objeto de referencia reactivo y mutable.

Puede acceder o mutar el valor del objeto ref usando la .valuepropiedad, pero eso solo está dentro del setup()método. En la plantilla correspondiente, puede utilizar el nombre de la variable como de costumbre, es decir, productNameen nuestro caso.

¿Por qué no necesita usar la productName.valuepropiedad en la plantilla?

<template>
  <h1></h1>
</template>

Simplemente porque cuando se devuelve una referencia como una propiedad en el contexto de representación (es decir, del setup()método) en la plantilla, se desenvuelve al valor primitivo original.

Publicar un comentario

0 Comentarios