Comunicación entre componentes padres e hijos

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(“name_event”, data)
recive in father
@name_event=“function”

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: {
‘vue$’: ‘vue/dist/vue.esm.js’,
’@’:path.resolve(__dirname, ‘resources/js’)
},
},
})

pero no se como usar en <style lang=“scss” 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.