Componentes dinámicos de Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

Los componentes dinámicos de Vue.js permiten a los usuarios cambiar los componentes sin actualizar la ruta de la aplicación Vue.js. También mantiene los datos en su estado actual. Es útil cuando el usuario está en una interfaz con pestañas.

Atributo de componentes dinámicos de Vue.js:

• :is : este campo acepta una string de nombre para el componente registrado o un componente real.

Sintaxis: en la sección del componente, agregue el campo :is y proporcione el nombre de la variable o el nombre del componente de la siguiente manera:

<component :is="currentComponent" />

Ejemplo: en el siguiente ejemplo, tenemos dos componentes y los hemos importado al archivo App.vue. Ahora podemos alternar entre los componentes sin recargar la página. 

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2: Cree una carpeta llamada / components debajo de la carpeta / src y cree dos archivos debajo, card1.vue y card2.vue respectivamente. La estructura debe ser la siguiente:

 

Paso 3: en card1.vue, agregaremos algunos datos relacionados con estructuras de datos y algoritmos de la siguiente manera:

<script></script>
<template>
  <h3>Data Structures and Algorithms</h3>
  <b>Data Structures</b>
  <ul style="list-style-type: none">
    <li>Arrays</li>
    <li>Set</li>
    <li>Priority Queue</li>
  </ul>
  <b>Algorithms</b>
  <ul style="list-style-type: none">
    <li>Searching</li>
    <li>Sorting</li>
    <li>Greedy</li>
  </ul>
</template>
  
<script>
  export default {
    name: 'App',
    components: {},
  };
</script>

Paso 4: En card2.vue, agregaremos algunos datos relacionados con los lenguajes de programación de la siguiente manera:

<template>
  <h3>Programming Languages</h3>
  <b>Object Oriented Programming Language</b>
  <ul style="list-style: none">
    <li>Java</li>
    <li>C++</li>
    <li>Python</li>
  </ul>
  <b>Procedure Oriented Programming Language</b>
  <ul style="list-style: none">
    <li>COBOL</li>
    <li>FORTRAN</li>
    <li>C</li>
  </ul>
</template>
  
<script>
  export default {
    name: "App",
    components: {},
  };
</script>

Paso 5: en la sección de script del archivo App.vue, registre los componentes y luego cree una variable de datos llamada componente actual para almacenar el nombre de la variable. Cree una función de alternancia para alternar el nombre de la variable con respecto a los componentes importados.

<script>
  import Card1 from "./components/card1.vue";
  import Card2 from "./components/card2.vue";
  
  export default {
    data() {
      return {
        currentComponent: "Card1",
      };
    },
    methods: {
      toggle() {
        this.currentComponent =
          this.currentComponent === "Card1" ? "Card2" : "Card1";
      },
    },
    components: {
      Card1,
      Card2,
    },
  };
</script>

Paso 6: en la sección de plantilla del archivo App.vue, agregue el elemento del componente y alterne con un clic de botón de la siguiente manera:

<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
            GeeksforGeeks
    </h1>
    <strong> 
        Vue.js Dynamic Components 
    </strong>
    <br />
  </center>
  <center>
    <component :is="currentComponent" />
    <button @click="toggle">Toggle</button>
  </center>
</template>

Paso 7:  Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida: al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components