Componentes dinámicos

Para que los estilos solo afecte al componente de interes y no de manera global a los otros componentes añadimos en el tag style la palabra reservada scoped

<style scoped>
    css
</style>

Componete dinamico: Vue nos ofrece la posibilidad de generar componente dinamicos usando tag de vue <component> y ha este tag le defininimos la directriz v-bind para hacerlo reactivo, para complementar el v-bind se usa la palabra reservada de vue is, este va tomar el valor del componente(nombre del componente definido en la propiedad components del componente(que lo contiene) y no el nombre con el que lo estamos importando.), osea que dependiendo del valor de is se muestra cierto componente u otro.

<component :is=" componente" />

Si les aparece un error de prettier al ejecutar

npm run serve

ejecuten primero el comando

npm run lint -- --fix

agregar a package.json

    "build": "npm run lint -- --fix && vue-cli-service build",

y luego en consola npm run serve

esto corrige el error de prettier que arroja el navegador

Para los que les salga errores en la vista, es por que la librería prettier recomienda usar comas y puntos al final

Si quieren agregar los props también en un componente dinámico, pueden hacerlo con la directiva v-bind="" de la siguiente manera:

<component
	:is="ComponentDin"
	v-bind="{ msg: 'Hola Vue'}"
>
</component>

.
Los props ambién pueden hacerlo dinámico con algúna lógica en los métodos o las propeidades computadas!

No conocía la etiqueta ‘component’ para vue

Componentes dinámicos

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <component :is="componente"></component>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },

  data() {
    return {
      componente: 'HelloWorld' //! Mismo nombre del objeto 'components'
    }
  }
}
</script>

En caso de que alguien llegara a crear su proyecto usando el comando:

npm init vue@latest

Lo mas probable es que la sintaxis para crear la variable componente no le funcione y asi se pueda mostrar el componente de HelloWorld. Esto se debe a que la etiqueta script tiene el atributo setup, el cual hace el export del componente, por lo que no funcionara. Para ello les recomiendo revisen el siguiente link setup para poder entender el como trabajar en vue teniendo el atributo setup en la etiqueta script o si quiere trabajarlo como lo hace la maestra y como se trabajo en el curso anterior de Vue, lo pueden hacer removiendo este atributo.

Hola chicos/as, a mi me apareció un error en varios de los archivos que al colocar el cursor arriba del error me decía algo como Parsing error: No Babel config file detected, para solucionarlo lo que hice fue entrar a las configuraciones de Visual Studio Code, y en la barra de búsqueda filtre por eslint y me manda a la configuración y hay un link que dice setting.json, pulsas sobre el (editar) y te abre ese archivo y le agregas el bloque

"eslint.workingDirectories": [
        {"mode": "auto"}
 ],

y ya con eso queda resuelto, la información la encontré en stackoverflow. Saludos.

si les genera este error: “[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue” ,una solucion temporal es ir a configuraciones de vscode, busquen: “eslint plugin” Vue y desactiven la opcion: “Vetur › Validación” y el error desaparecera!

En la nueva version de vue.js cambia un poco la cosa.

Ejemplo sacado de la documentacion de vue.js:

Componentes dinámicos:

Dado que se hace referencia a los componentes como variables en lugar de registrarse bajo claves de cadena, debemos usar :isenlace dinámico cuando usemos componentes dinámicos dentro <script setup>:

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

Observe cómo los componentes se pueden utilizar como variables en una expresión ternaria.

Me parece que tener todo dentro de un solo archivo puede ser contraproducente.

Para q no pierdan la prop inicial de HelloWord, pueden hacer lo siguiente

<component :is="componente" msg="Hellow PLATZI"></component>

Muy buena clase…

Para definir componentes dinámicos en Vue se debe utilizar la etiqueta <component> utilizando su atributo :is

<component :is=“currentTab”></component>