Componentes dinámicos

4/23
Recursos

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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" />

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>

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

Muy buena clase…

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

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