Blazor en 2020 - parte 3 - componentes

1. Introducción: hola y bienvenidos a la tercera clase en el blazer off de Siri en 2000 y 20 ahora, en este, vamos a cubrir componentes, componentes o, como probablemente sabrás, es una parte crucial off blazer. Cualquier proyecto blazer tendrá algún componente. Lo más probable es que ahora, en este caso, cubra el básico sat up off componentes servi parámetros para componentes. Cuando también entraremos en eventos personalizados y encuadres personalizados para los componentes en. En el camino, te daré algunos otros consejos útiles y consejos sobre esos vienen bono juventud y la grasa menos tu arrancado. 2. Fundamentos: Hola. Y con Lex, aprendes a usar un componente. Ahora será de una manera muy básica por ahora, que es básicamente cómo mostrarlo, cómo crear uno y cómo usar barómetros, cómo pasar votos de fruta, valores de barómetro en un componente. Ahora bien, si echamos un vistazo a la tienda en un pequeño ejemplo, lo que tenemos aquí es básicamente una plantilla limpia. Entonces tenemos índice dot reserve er archivo principal, por supuesto, que es una página. Está bien. Y entonces tenemos la navaja de punto de prueba componente, que es un componente ahora un componente y una página. En realidad es el mismo tipo de archivo. Es lo mismo. Daughtry es un archivo. Si vas a Teoh se páginas 40 click derecho en él, puedes ir a agregar puedes ir a nuevo artículo de la misma manera. Y luego obtenemos todo este diálogo y luego eliges elevar un componente. Entonces lo mismo que va para un fantasma de página para componente es el mismo archivo de afeitar de puntos. La única diferencia es que el componente no necesita una ruta, OK, no necesita una ronda. Podría tener una ruta. Podría A Podría tener un tan para uso multipropósito. De acuerdo, pero normalmente o componentes no tienen rutas. Y esto es estar dentro de fuera. Prueba componente dot Razor ahora, Como puedes ver, tenemos un par de parámetros en la sección de código. Tenemos parámetros. Ya has visto los parámetros para las páginas. Tenemos parámetro, por supuesto, muy importante. Y tenemos público como de costumbre y después nos tenemos listo. Ahora, una cosa a tener en cuenta. Ya sabes, en este caso, tenemos fortalezas. Podría tener cualquier valor que desee para los componentes. Puedes pasar por cualquier tipo de inmersión que quieras. Fue doble por Teoh. Podría ser parte de tu clase personalizada. Realmente no importa. Todo va para un C Sharp es nuevo problema si en absoluto. Y entonces simplemente mostramos para demostrarlo importó hace de hecho trabajo. Ahora, la forma en que declaras el componente, en realidad es bastante fácil. De acuerdo, así que tenemos en el índice opera como se puede ver, el componente declarado. Ahora la forma en que haces eso es así de la forma que harías si algún html Ellemann tagger, sí dirías un caso de ti. Ábrelo así, luego lo cierras. ¿ De acuerdo? Ciérralo así. Y luego pones tus barómetros en su lugar. ¿ De acuerdo? Hay algunas cosas más, pero puede tomar que usted pueda tener Y vamos a echar un vistazo a esas en las próximas conferencias. Pero básicamente, declaras esto y luego para los barómetros, pasaste por tus valores así. Muy fácil de hacer. Muy sencillo de hacer y muy útil. Efectivamente. Ahora olvídate rápidamente a un navegador puedes ver la materia efectivamente funciona. Tenemos beram nos quieren un prompt para probar uno también, en realidad, pero realmente no importa ahora que vamos a concluir esta conferencia. 3. Eventos personalizados: Hola En esta conferencia se echará un vistazo a los eventos para componentes. Ahora bien, esto es muy importante porque esta es una de las pocas formas de transferir datos fruto del elemento hijo al elemento padre. Esto es importante una vez más, y en realidad es bastante fácil de hacer. Pero sí hay que seguir algunas reglas y cosas. Entonces ahora echemos un vistazo a nuestro pequeño ejemplo. Y en la solución Explorer. En primer lugar, tenemos Ah, Bages, señor. Apenas la página de índice en que nuestro componente de prueba, que es el componente estaban trabajando con Onda derecha. Entonces tenemos un modelo de prueba, así que te mostraré lo que También puedes devolver tipos específicos de objetos específicos de clase específicos del modelo . A ni sólo una cadena simple en ella o un entero. De acuerdo, entonces entrémonos primero en el componente de prueba. Está bien. Así. Y veamos qué tenemos aquí. En primer lugar, tenemos un par de botones. OK, tenemos un par de botones en click de los que tenemos. OK, vamos a echar un vistazo a esos más tarde, pero después tenemos en la sección de códigos, como pueden ver, la sección de códigos comienza justo aquí. Tenemos un par de barómetros, ¿ Pero qué? Estas son sus propias cuerdas simples o interjetos o dobles. Se trata de devoluciones de llamadas de eventos. Está bien. llamadas de eventos que llevan cuerda derecha Cargar. O el 2do 1 llevaría modelo de prueba. Por lo que tenemos el evento uno, que, cuando se ejecuta cuando se invoca, llevará a través del evento una cadena a K string derecho evento uno Booker llevará a través una cadena y luego evento también. Tendrás modelo de prueba ahora. El camino los accederá a ellos es muy similar a los genéricos al click en imp ERT en cambio . De acuerdo, conseguirás los argumentos que veas tener hecho. Pero la forma en que invocas desde un K. Pero ¿invocarás? Um, si puedes ver, esto es sólo un simple parámetro estructura barómetro público, entonces ponte listo. Nada asignado así como eso. Está bien, pero no tenemos una tarea simple. Está bien. Método arrojado justo aquí donde construimos un nuevo objeto. Nuestro modelo de prueba. Está bien. Nuestro modelo de prueba construimos y luego ves, para ejecutar el evento para invocarlo, necesitas dio evento para decir derecho dado a ti y luego invocar un fregadero y en los parámetros que proporciones. Proporcionas esa pieza de datos que quieres devolverla la la llamada. Se desea pasar por el elemento padre. Esto es muy importante. De acuerdo, aquí es donde lo provees. A pesar de que sería brillante en la cárcel. Cualquiera que sea el tipo que quieras usar, esa es la forma en que lo proporcionas. Y tú lo invocas. Un caso de hundimiento o un sincrónico era no. Invoca sólo se invoca un fregadero. Entonces así es como hacemos eso. Y en este punto, el evento ocurre ¿verdad? Una vez que ha invocado, se produce en DA. Para el 1er 1 solo somos una ejecución sencilla, muy sencilla, ¿ verdad? Oye, ten un fregadero puesto. Haga clic a la derecha. Un fregadero, el peso. Y luego lo invoca, ¿verdad? Pelo en eso en el escenario click, ¿verdad? Igual que eso. Ahora bien, si vamos hasta el final, exalta la navaja. El de la página principal. Como puedes ver, tenemos un auto de página derecho. Y entonces tenemos ah par de párrafos. Tenemos evento uno argumento. Un caso de esto es la cadena que vendrá de ejecutar el evento uno de ese evento cuando se produzca primero evento y luego evento a usted. Tenemos un par de argumentos de nuestros objetos que imprimimos eso de una manera un poco diferente . Tenemos que se fue a y luego intestino uno. Y ahora, también, así. De acuerdo, ahora, así es como puedes obtener esos datos. Al igual que cualquier evento normal, puedes o simplemente hacer tu método. De acuerdo, entonces tenemos método para evento. Un método para fue uno así. Ya ve, tenemos argumentos. String ¿verdad? Fechas de forma automática. No hay que declarar ningún argumento. Ah, no hay parámetros. ¿ No hay alarma Ders? No, nada como ese caso. Acabas de poner eso y se ejecuta. Toma los argumentos, y asigna a ser argumento de evento uno que se ha mostrado en la parte superior. Ahora, la segunda opción es hacer un poco de camino. Elaborado broche. De acuerdo, Tenemos evento para escribir pelo, incluso a nosotros tenemos. Y luego ya ves, tenemos argumentos, Auxerre así otra vez, al igual que un evento convencional al click en cambio show en otra cosa que hemos estado también. Entonces tenemos toda nuestra expresión alarmada pasando, ¿verdad? Tenemos agosto que llevamos perros y luego podemos hacer lo que queramos con él. El en este caso, simplemente una señal de huevos para que ese es el objeto pudiera conseguir arena para eso en vocación a través de ese evento. Y luego es tan en argumentos de evento fueron a argumentos, de acuerdo, Y luego se muestra así. Si es no, inicialmente, no es derecho. No consigue exhibirlo todo. Una vez que Somalia existe en ese contexto que obtenemos una exhibición. Ahora en realidad ya lo estamos ejecutando en los marrones en el cromo. Y yo voy a entrar en eso. Como pueden ver, este es el arreglo completo del evento uno. No vemos nada de dos. No vemos nada. Pero si ejecuto para el evento uno que veas, obtengo mi cadena de prueba y luego ejecuto para fuimos a obtener mi prueba de dos valores y 10. Ahora, yo sugeriría jugar con él. Un Chester amargo. Agarra todo ese concepto. Pero no te quedes demasiado tiempo en ello. Es bastante fácil de usar. Sólo recuerda que esta característica sí existe de hecho y lo estarás usando bastante. Y con eso, concluiremos con conferencia 4. Enlace ados personalizados: Hola. Y con real echa un vistazo a otra forma de vincular los datos del componente hijo al componente padre para pasarlo fruta de un componente carbonizado al componente padre al show de la página principal, sea lo que sea. De acuerdo, entonces en este caso, en el ejemplo lento, tenemos Ah, un par de cosas. Cosas adicionales. Ese es el componente de prueba. Y un segundo componente de prueba que tenemos un par de componentes de prueba, un k Y entonces, por supuesto, el punto índice principal elevar una página. Ahora en el componente de prueba. Si miramos eso primero, sólo tenemos un click de botón. OK, un botton click. Y en el click, en realidad invocamos un evento. De acuerdo, entonces tenemos una devolución de llamada de evento personalizada. De acuerdo, Evento personalizado. Nosotros lo llamamos Evento uno, y luego tenemos cadena Una cadena K es lo que obtiene retorno por eso ahora, no será simple conseguir un argumento de un evento. Será un poco más elaborado. De acuerdo, Tal vez un poco más fácil, pero más limpio para leer y y usar. Pero tanto por tema. Piensa bien. Y entonces tenemos ah, el valor real. De acuerdo, Tenemos valor uno, por lo que se vinculará del padre. Se vinculará al valor uno. De acuerdo, cuando ocurre el evento uno, OK, por lo que también se muestra. Habitar. Si vamos a la maquinilla de afeitar de punto índice, vamos a eso. Podemos ver que tenemos componente de prueba. Está bien. Y luego aquí mismo en el kurdo, tenemos ah, valor uno. OK, tenemos Ali uno el cual se muestra en la entrada. Está bien, es ah ah ah. Tiene un encuadernación con la entrada también, por lo que podemos ingresarlo en cabello y se cambiará en el componente, pero lo cambiamos a través del componente. También cambiará de mano. Por lo que la entrada valiosa cambia bien, un caso de la forma hacen eso. Como pueden ver, tenemos ligamento. Y luego declaramos a qué barómetro nos vinculamos. Y entonces lo que hay que declarar es el evento. El evento en el que se une un caso de mente usted, En este caso, lo llamamos valor uno, y luego el evento se llama evento uno. Pero hay una manera más fácil, ya que se tiene por especie de echó un vistazo a ese derecho tenemos segundo componente de prueba y en él, también necesitamos invocar un fregadero fuera de curso. Correcto. Y volvemos a mostrar el valor en el componente. Tenemos valor de cadena uno. Pero la diferencia aquí es que tenemos evento Colback nombrado valor uno cambió un caso de la variable. El string es el valor uno. Ahora la tive Perama y Colback es valor uno cambiado. Entonces esta es una especie de palabra clave, como en un E p I, por ejemplo, tendrías ah, controlador, algo controlador dot CS y luego el sistema. Todo el arreglo sabe que se trata de un archivo controlador. De acuerdo, entonces vamos al índice y veamos cómo funciona. Como pueden ver, tenemos otro insumo. Vinculamos eso al valor al valor, a escribir cabello. De acuerdo, esto es para visualización, y luego ves segundo componente de prueba, simplemente vinculamos valor uno. No necesitamos especificar el evento. Está bien. No necesitamos especificar realmente el evento. Simplemente podemos vincular valor uno así como eso. De acuerdo, así que esta es una manera un poco limpia de hacer eso. Y en realidad sugeriría si vas con este enfoque vinculante en lugar de evento llamado de vuelta. Entonces tenemos un método o lo que sea que pueda ser algún tipo de acción. Yo sugeriría ir venganza porque es una representación limpiadora de loft fuera de todo un arreglo. Se puede ver con bastante claridad lo que hace cada beram me a donde pertenece la bolsa fría a qué propiedad que vino. Ahora en realidad lo tenemos funcionando, acuerdo? Y los marrones en la mano derecha cromada. Lo tenemos funcionando y se puede ver que tenemos ejecutar evento ful una vez o vamos ah, prueba de Lizzie Cem. Está bien. Así. Ya ve, lo solté. Contento Así lo atan con ah, entrada gorda Una cueva con la entrada y ah ah, la real soportable de aparente soportable. De acuerdo, ahora, si ejecuto el servicio mental invocará visible en el Advancer Oakley. Haga clic en eso. Ya ves, cambia el cabello y cambia. ¿ Verdad? Que un caso ahora el 2do 1 podemos hacer DST Wazir como planta. De acuerdo, así que funciona bastante perfectamente también. Y si cambio, no todo cambia también. Entonces ya ves, sí funciona bastante perfectamente. Es una gran cosa tener Ah, es una gran cosa de usar. Y de nuevo si tienes alguna acción, si tienes alguna acción una vez que ese soportable se pasa a través del padre, probablemente deberías quedarte con los eventos. Pero si no tienes ninguna acción, si solo necesitas asignar un valor, esto es mucho mejor, Mucho limpio una manera de hacerlo, y con eso concluiremos esta conferencia. 5. Referencia de componentes: Hola en esta conferencia echará un vistazo a algo llamado referencia de componente o una referencia o un raff. Ahora, básicamente, lo que no hace te permite dar un sofá de referencia casi ah, similar a un I. D e I D en ciertos otros idiomas o interfaces para tienda C y básicamente acceder a cosas que está en el componente toda la propiedad por lo que están en esa disposición de componentes entera. Entonces para este ejemplo, tenemos en las páginas cuatro orden cabello derecho y exhorto maquinilla de afeitar y luego componente de prueba. Eso es todo. Eso es todo lo que tenemos. Eso es lo que necesitamos ahora en el componente real. A ver qué tenemos. Yo vine. Tenemos una entrada, ¿de acuerdo? Y luego tenemos una cadena que mostrar para mostrar. Ahora éste, Como se puede ver, es cadena privada para mostrar. De acuerdo, nada elegante. Y luego se muestra el molestar, sin embargo es público y lo vinculamos a la entrada Vale, público, y lo vinculamos a la entrada. También contamos con un método de tarea pública. Tenemos un método de tarea pública que sacude en valor para mostrar cadena una K que luego se asigna a mostrar. Vine ahora Después de eso, tenemos estatus. Has cambiado este método básicamente enders traseros algo. Cuando tipo de trabajo en un Fred diferente, vamos a cubrir esto más profundamente en ah, uno de los próximos. Fuera de las conferencias, colorearemos todo esto bastante en profundidad, realidad. Pero esto es lo que necesitas para que esto funcione por ahora, ¿ verdad? Y luego si entramos en la maquinilla de afeitar de punto índice, se puede ver. Pero tenemos, ah, componente de prueba. Y luego también tenemos algo viejo ref, el ref y luego CMP. Ahora, CMP, como se puede ver, es básicamente una variable una variable simple Ah, mejor componente off type desk components of at CMP. Y eso es referencia, ¿verdad? Entonces básicamente CMP Province variable, que ha hecho una referencia se puede acceder a cualquier propiedad pública fuera de ese componente. Y esto es lo que hacemos. Tenemos un pequeño método de prueba el cual es por cierto, ejecutado en esto, pero en el click fuera de su parte inferior, derecha, Y entonces tenemos que mostrar para mostrar mente usted, esta es una cadena otra vez, una problema con cadena en el punto índice plantea no es lo mismo que uno en componente de prueba y luego tenemos ese método de prueba que, como se puede ver, hace un par de cosas. Asigna la cadena de prueba del componente que se ve desde el componente. Asigna la cadena de tareas para mostrar y por lo tanto se mostrará. Ahora también se ejecuta con método de prueba desde el mejor componente, y da un poco de palabra funciona. Yo vine así que ejecuta que ese es éste, ¿no? Este. Para que veas, puedes acceder a las propiedades para ser cadenas y, bueno, otro tipo. Podría haber preguntado también el método. Entonces veamos cómo funciona. Lo estamos ejecutando en cromo de inmediato. Está bien. Y así ven, este es nuestro programa que dice que voy a introducir algo mejor ahora ejecutar O más bien, antes que nada, me importa más, Vamos a ejecutarte Ves, ahora dice funciona y fue capaz de asignarlo. Tenemos prueba así de nuevo, básicamente lo que te permite hacer esas referencias, acceder a todas las piezas fuera del componente como lo harías con cualquier clase normal. Y antes de eso dicho vamos a concluir este