Modulariza tus componentes de Alpine JS en bloques de Script 12

Como te había comentado la característica principal que tenemos aquí en alpin o lo más interesante es que podemos crear así componentes directamente en el html aquí colocamos la Data por aquí ya colocamos la lógica y tenemos como quien dice microcomponentes un componente bastante chiquito que hace alguna operación en particular pero en caso de que sea necesario también podemos crear un componente un poco del esquema que tenemos en Vue en la cual tenemos un bloque de Script y esto es útil cuando tenemos mucho javascript estaré inyectando todo esto en un mismo lugar ya que esto va creciendo mucho y bueno obviamente dificulta aquí la lectura de mantenimiento y todo lo que ya sabemos y por lo tanto podemos también crear un bloque de Script aparte que es un poco lo que te muestro por aquí vamos aquí arriba primero entonces simplemente creamos aquí una función de javascript clásica de toda la vida con cualquier nombre que retorne algo aquí retorna tanto las variables y funciones:

<script>
  function data(){
    return {
             // variables y funciones
   }
}
</script>

Que viene siendo un poco el chiste de emplear al pin tener un conjunto de funciones que podemos invocar por ejemplo mediante el evento click y las variables que nosotros vamos a utilizar en el componente eso viene siendo lo básico Aquí tienes un ejemplo del valga la redundancia del ejemplo anterior del componente anterior aquí fíjate que ahora estamos colocando es data que es el nombre que le dimos por acá y retorna en este caso la única Data que tenemos ya que no estamos empleando funciones que sería el ar de todos tal cual lo tenemos vamos a hacer este ejercicio y luego seguimos explorando alguna características adicionales así que bueno por aquí en cualquier parte voy a colocar voy a colocarlo aquí el bloque de Script aquí colocamos Data; retorna es un objeto un objeto con todo la Data que tengamos en este caso si me vas a permitir aquí copiar esto no voy a reemplazar este porque quiero hacer otro voy a seleccionar todo esto porque va a ser similar lo voy a duplicar creo que duplicó perfecto voy a llamarle aquí componente siete aquí voy a quitar esto fíjate que a la final es un objeto:

<script>
  function data(){
    return {
             // variables y funciones
   }
}
</script>

Entonces le espero un objeto por lo tanto tenemos que retornar un objeto y colocamos todo el contenido de las funciones y variables, tal cual definiriamos directamente en el HTML:

  <div
       x-data="data()">

       <template x-for="t in todos">
           <p>
               <template x-if="t.completed">
                   <span>Completed</span>
               </template>
               <template x-if="!t.completed">
                   <span>Incompleted</span>
               </template>
               <span x-text="t.task"></span>
           </p>
       </template>
   </div>

   <script>
       function data(){
           return {
               todos:[ ],
       }
   </script>

Es básicamente lo mismo así que pues nada de esta forma en caso de que se te quede corto se te quede problemático definir todo como quien dice línea en el html puedes también emplear esta sintaxis yModulariza tus componentes de Alpine JS.

08-12-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Modulariza tus componentes de Alpine JS en bloques de Script 12