Uso de context

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 💘