Adquiere este curso para tener acceso a todas las lecciones
Comprar curso25. 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.
6 comentarios
Inicia sesión para comentar
Comentarios:
-
Sergio ┏(-_-)┛┗(-_- )┓┗(-_-)┛ hace 3 semanas
En la versión de Vue 3.4.29, en el componente principal App.vue solo fue requerido el importar el componente creado Counter.vue
<script setup> //import HelloWorld from './components/HelloWorld.vue' //import TheWelcome from './components/TheWelcome.vue' import Counter from './components/Counter.vue' </script>
En el archivo App.vue no se visualizo dentro de las etiquetas <script></script> un export default como el siguiente:
<script> export default { } </script>
Y dado que no existe a como lo indica en el video, solo están las importaciones de lo componentes y solo se agrego el import correspondiente a Counter.vue y con eso fue suficiente para que se lograra usar dentro de las etiquetas <template></template> nuestro componente creado
<template> <main> <Counter /> <h1>Titulo principal</h1> </main> </template>
El componente creado Counter.vue quedo de la siguiente forma:
<template> <h1>Hola desde el componente counter</h1> <button @click="disminuir()" :disabled="contador==0"> - </button> {{ contador }} <button @click="aumentar()"> + </button> </template> <script> export default { data(){ return{ contador: 0 } }, methods:{ disminuir(){ this.contador--; }, aumentar(){ this.contador++; } } } </script> <style scoped> h1{ color: red; } </style>
-
Adrián García hace 1 año
Actualmente, para crear la estructura es con “vueInit”.
-
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 hace 1 año
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 1 año
Hola Toni, puedes usar lo aprendido para deshabilitar.
Simplemente agrega un v-bind:disabled="contador == 0"
-
-
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 hace 2 años
:)