A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Comunicaci贸n entre componentes padres e hijos

27/53
Recursos

Aportes 22

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Comunicaci贸n entre componentes padres e hijos

Este es mi resultado:
Fue una clase muy buena, recorando conceptos del curso basico de vue.js, y es interesante como con un objeto podemos guardarnos el hecho de pasar varias props al componente hijo, sera algo a tomar en cuenta para proyectos futuros.

C贸digo de la clase: https://github.com/paolojoaquin/platzi-music/tree/Clase/27

La comunicacion de un padre a un hijo es por medio de propiedades, mientras q la comunicacion de un hijo a un padre es por medio de eventos.

Esto tambi茅n lo vimos en el curso b谩sico de una manera un poco m谩s simple, mi 煤nico problema es que la API no esta disponible pero estoy simulando una hardcodeada jaja #NuncaParesDeAprender (?

Con el CLI 3 de Vue ya no es necesario hacer la modificaci贸n en el webpack.config. Autom谩ticamente, al escribir @, el int茅rprete ya sabe que se est谩 haciendo referencia a la carpeta source.

child to father
this.$emit(鈥渘ame_event鈥, data)
recive in father
@name_event=鈥渇unction鈥

Loader.vue:

<template lang="pug">
  .container
    .load.has-text-centered
      h1.title Cargando...
</template>

<style lang="scss">
  .load {
    padding: 20px;
    min-height: 40vh;
  }
</style>

para usar en laravel 5.7

en el archivo de webpack.mix.js

mix.webpackConfig({
resolve: {
extensions: [鈥.js鈥, 鈥.vue鈥, 鈥.json鈥橾,
alias: {
鈥榲ue$鈥: 鈥榲ue/dist/vue.esm.js鈥,
鈥橜鈥:path.resolve(__dirname, 鈥榬esources/js鈥)
},
},
})

pero no se como usar en <style lang=鈥渟css鈥 scoped> para importar estilos ? ya que @import 鈥楡/plugin/datatable/estilos.css鈥 no me resuelve la ruta, pero si la uso por import en <script> va ok pero me queda global y me afecta demas estilos, que hacer?

Creo que hubiera sido mejor agregar el loader debajo del search

porque en los componentes pasados no usamos export ?

Genial!

15:27 //_ No se preocupen se esta viendo horrible pero lo vamos a acomodar._

jejejejeje, 馃槀 t铆pico del desarrollo en Frontened

Hay alguna manera de implementar FontAwesome al proyecto. Lo he intentado pero al final no me muestra el icono de fuente.
Hice modificaciones al archivo webpack para que cargue los archivos de fuente y svg, ya no hay error en la carga de archivos, pero no me los muestra.

Ahora si entiendo que funci贸n tiene un componente.
Eso profe muy bien.
Me daba conflicto lo de paso de propiedades y paso de eventos.
Pero con el gr谩fico me ha quedado muy claro.
Por cierto, seria excelente el me pueda compartir ese gr谩fico junto con el de reactividad, esos hay que guardarlos muy bien.

Con respecto a la clase .is-1by1, son clases de bulma para la Relaci贸n de aspecto, que en este caso significa 1 x 1 (cuadrado), tambi茅n existen para definir directamente el tama帽o de la im谩genes.

Para relaci贸n de aspecto:

.image.is-square // 1x1
.image.is-1by1  // 1x1
.image.is-5by4 // 5x4
.image.is-4by3 // 4x3
.image.is-3by2 // 3x2
.image.is-5by3 // 5x3
.image.is-16by9 // 16x9
.image.is-2by1	// 2x1
.image.is-3by1	// 3x1
.image.is-4by5	// 4x5
.image.is-3by4	// 3x4
.image.is-2by3	// 2x3
.image.is-3by5	// 3x5
.image.is-9by16 // 9x16
.image.is-1by2	// 1x2
.image.is-1by3	// 1x3

Para dimensi贸n:

.image.is-16x16  // 16x16px
.image.is-24x24  // 24x24px
.image.is-32x32  // 32x32px
.image.is-48x48 // 48x48px
.image.is-64x64  // 64x64px
.image.is-96x96  // 96x96px
.image.is-128x128  // 128x128px

m谩s informaci贸n: aqu铆

Es importante agregar el atributo scoped en los estilos del Loading.vue, de lo contrario la modificaci贸n de la clase .content tambi茅n va a afectar a las cards de m煤sica.

<template lang="pug">
  .container
    .content
      h1 Cargando ...
</template>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    min-height: 40vh;
  }
</style>

Les recomiendo mucho estos estilos para el loader https://projects.lukehaas.me/css-loaders/ los vimos en el curso pasado y son muy elegantes

  1. Los props nos permiten compartir propiedades entre componentes padres e hijos.
  2. Primero hago un fetch para traer los valores en el componente padre, y finalmente paso por el props los valores al componente hijo.

Los componentes hijos no pueden modificar o mutar las propiedades que vienen de un componente padre.

Puede ser que tangan problemas con la API de platzi music?

Access to fetch at 'https://platzi-music-api.now.sh/search?q=daft%20punk&type=track' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Creo que la api ya no funciona.

Cambio en webpack para crear un alias que nos permitir谩 manejar crear un ruta absoluta(nuestra carpeta ra铆z de proyecto)

El curso est谩 bueno, pero la verdad el hecho de tener PUG, BULMA (conceptos nuevos) no ayudan mucho a que la ense帽anza se centralice en VUE que es el inter茅s de este curso.