No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de context

18/23
Recursos

Aportes 9

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Uso de context

Un atributo es todo eso que recibimos en la llamada a nuestro componente. No es necesariamente un prop.

setup(props, context) {
  console.log(context)
}

Bueno para usar el context con el script setup es un poco distinto, el script setup nos trae una serie de beneficios muy buenos;

  • You get better runtime performance.
  • You can write clean code with less boilerplate.
  • You can declare your props and emit events using pure TypeScript.

el c贸digo que us茅:

<script lang="ts" setup>
import {useAttrs } from "vue";

const attrs = useAttrs();
console.log(attrs);

</script>

Tambi茅n para las dem谩s context properties:

emit


<script setup>
const emit = defineEmits(['hide']);

const hideTitle = () => {
    emit('hide')
}
</script>

expose

import { ref } from 'vue';

const count = ref(0);

const timer = setInterval(() => {
    count.value++;
}, 1000)

const resetCounter = () => {
    count.value = 0;
}

const stopCounter = () => {
    clearInterval(timer);
}

defineExpose({resetCounter})

slots

import { useSlots } from 'vue';

const slots = useSlots();

console.log(slots.default());

Viuuu, Me parece que se podr铆an incluir algunos ejemplos鈥 quede pedaleando en el aire.

Hola, para utilizar expose en el componente padre se utiliza el atributo [ref] con alg煤n valor al momento de declarar el compomente hijo en el template:

  • En este caso el valor es [home], pero puede ser cualquiera
<home ref="home">

Y para acceder a su valor en script utilizamos

this.$refs.home.fullName;

De tal manera que en App.vue tendr铆amos lo siguiente

<template>
<home ref="home">
<button @click="showExpose">Show Expose</button>
</template>

<script>
import Home from "./components/MainHome.vue";

export default {
  name: "App",
  components: {
    Home,
  },
methods: {
showExpose() {
      const fullName = this.$refs.home.fullName;
      console.log(fullName);
  },
 },
};
</script>

Y en Home.vue tendr铆amos

...
expose({
      fullName,
    });
...

me gustaria que subieras otro explicando como acceder a cada variable del context y como usarlos, me parece que los mencionaste y es importante aprenderlos

Lo 煤nico que me quedo claro es que se usa para poder hacer emits, pero siento que no quede claro.

pues compositionApi tiene todo lo de optionsApi mejor estructurado si vamos a hacer una aplicacion vue mas grande.
Aunque uso mucho optionsApi para el front de laravel con inertia (vue.js con el routing y backend de laravel).

Me esta encantando la Composition API de Vue 馃挊