Componentes y props

Clase 9 de 17 • Curso de Vue.js: Navegación con Vue Router

Eduardo Torres

student•

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);
});

Rafael Soriano Ramírez

student•

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.

Ameth Ordoñez Erazo

student•

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: 'vue'} 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.

Carlos Rodríguez

student•

Referencia: Passing Props to Route Components

Julian David Alzate Cuervo

student•

si no les funciona los mensajes con props, campiar la linea rel deturn messafesFiltered, ya que en el video no se muestra al principio

return `${msg.author}` === this.chatId
```                return `${msg.author}` === this.chatId

Julian David Alzate Cuervo

student•

en donde esta el reopsitorio de este curso?

Abel da Cunha

student•

Esto de los props es Super útil... creo que fue la mejor clase!

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);
});

Componentes y props

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso