No tienes acceso a esta clase

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

Componentes y props

9/17
Recursos

Aportes 7

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Me recuerda un poco a las configuraciones de rutas con Angular, bastante limpias, pero m谩s en Vue, ya que no importas nada extra帽o, se ve tan simple y es f谩cil de entender.

Para rutas con vistas con nombre, debemos definir la opci贸n props para cada vista:

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

Cuando props es un objeto, se establecer谩 como el componente props tal cual. 脷til para cuando los props son est谩ticos:

const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

Tambien se puede crear una funci贸n que devuelva props. Esto nos permite convertir par谩metros en otros tipos, combinar valores est谩ticos con valores basados en rutas, etc.

const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]

La URL /search?q=vue pasar铆a como {consulta: 鈥榲ue鈥檥 como props al componente SearchUser.

Se debe Intentar mantener la funci贸n de props sin estado, ya que solo se eval煤a en los cambios de ruta. Use un componente contenedor si necesita un estado para definir los props, de esa manera VUE puede reaccionar a los cambios de estado.

si no les funciona los mensajes con props, campiar la linea rel deturn messafesFiltered, ya que en el video no se muestra al principio ```js return `${msg.author}` === this.chatId ```聽 聽 聽 聽 聽 聽 聽 聽 return `${msg.author}` === this.chatId
en donde esta el reopsitorio de este curso?

Para definir los props con composition API en ChatView.vue:

import { defineProps, toRefs } from "vue";
const props = defineProps({
  chatId: {
    type: String,
    default: ''
  }
})
const {chatId } = toRefs(props); // importante que sea reactivo. Asi recibe el nuevo valor al momento de navegar a otro chatId.

const messagesByAuthor = computed(() => {
  return messages.value.filter((m) => `${m.author}` === chatId.value);
});

Esto de los props es Super 煤til鈥 creo que fue la mejor clase!