Creación del un componente con Vue CLI
Comprar curso

25. Creación del un componente con Vue CLI

Ahora que conocemos la estructura del proyecto, es hora de empezar a crear nuestros propios componentes. En este capítulo, aprenderás a crear y utilizar componentes personalizados en tu aplicación de Vue 3.

Tema anterior Siguiente tema

6 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Martin Aquino

    Martin Aquino hace 1 semana

    Hola estoy siguiendo el curso, pero me encuentro con que está completamente desactualizado. Realice el contador siguiendo la documentación y buscando en internet y ahora se hace completamente distinto.

     

    <template>

        <div>

            <button @click="incrementar">+</button>

                <p>{{ contador }}</p>

            <button @click="decrementar">-</button>

        </div>

    </template>


     

    <script setup>

        import { ref } from 'vue';


     

        // Crear una variable reactiva con ref en lugar de data()

        const contador = ref(0);


     

        // Crear un método para modificar la variable

        function incrementar() {

            contador.value++;

        }

        function decrementar() {

            contador.value--;

        }

    </script>

  • Adrián García

    Adrián García hace 1 año

    Actualmente, para crear la estructura es con “vueInit”.

  • Adrián García

    Adrián García hace 1 año

    Por si te tienes el siguiente error: "Component name "Counter" should always be multi-word  vue/multi-word-component-names".


    Esto se debe a que Vue da como regla que todos los componentes que crees deben estar nombrados por 2 palabras (Ejem: “MyCounter”), con la finalidad de evitar futuros conflictos con las etiquetas HTML.
     

    Puedes leerlo en la documentación: https://eslint-vuejs-org.translate.goog/rules/multi-word-component-names.html?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es-419&_x_tr_pto=sc

    • Victor Arana Flores hace 1 año

      Hola Adrian, gracias por el aporte.

  • Toni

    Toni hace 2 años

    Al final del video comentas que vamos a deshabilitar el botón cunado el contador tiene el valor de 0, el video o la información no aparece

    • Victor Arana Flores hace 2 años

      Hola Toni, puedes usar lo aprendido para deshabilitar.

      Simplemente agrega un v-bind:disabled="contador == 0"

  • Alberto Rodriguez

    Alberto Rodriguez hace 2 años

    lleno de errores, me dice que el componente tiene que tener dos palabras? :(

    • Cfig hace 1 año

      Es una restricción que al parecer trae Vue. Puedes deshabilitarla revisando la documentación, o dar a tu componente un nombre que tenga dos palabras (y hacer los ajustes respectivos donde sea llamado o enunciado el componente con el nombre anterior).

  • Dante Arias Tarifa

    Dante Arias Tarifa hace 2 años

    :)