Monte dinámicamente un solo componente de archivo en Vue.js

Solución:

Utilice los componentes dinámicos de Vue

Puede utilizar componentes dinámicos para cambiar dinámicamente entre componentes. Deberá vincular el objeto de definición del componente al is atributo del component elemento: la documentación de Vue sobre esto se explica por sí misma. A continuación también se muestra un breve ejemplo:

<template>
  <component :is="activeComponent"></component>
</template>

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  components: {
    componentA,
    componentB,
  },

  data() {
    return {
      activeComponent: 'componentA',
    },
  },
};

Puede vincular directamente el objeto de definición del componente a la propiedad de datos en sí:

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  data() {
    return {
      activeComponent: componentA,
    };
  },
};

Para cambiar componentes, puede cambiar programáticamente el valor de activeComponent.

Usa una función de renderizado

Se puede lograr una forma más poderosa de montar componentes dinámicamente utilizando funciones de renderización de componentes. Para hacer esto debemos crear nuestra propia versión de Vue’s component elemento – llamaremos a esto el ElementProxy:

import componentA from 'component/a';
import componentB from 'component/b';

export default {
  components: {
    componentA,
    componentB,
  },

  props: {
    type: {
      type: String,
      required: true,
    },
    props: {
      type: Object,
      default: () => ({}),
    },
  },

  render(createElement) {
    const { props: attrs } = this;
    return createElement(element, { attrs });
  },
};

Ahora puede usar el ElementProxy a elementos proxy. El beneficio adicional de esto es que puede pasar accesorios como un objeto que resolverá el problema de pasar accesorios a componentes dinámicos con diferentes modelos.

<template>
  <element-proxy :type="activeComponent" :props="props"></element-proxy>
</template>

import ElementProxy from 'components/elementProxy';

export default {
  components: {
    ElementProxy,
  },

  data() {
    return {
      activeComponent: 'componentA',
      props: { ... },
    };
  },
};

Otras lecturas

• Documentación de Vue para componentes dinámicos
• Documentación de Vue para la función de renderizado
• Hilo de problemas de GitHub para vincular accesorios

Sí, necesita componentes dinámicos:

<template>
  <div>
    <component v-bind:is="currentView">
    <!-- component changes when vm.currentView changes! -->
    </component>
  </div>
</template>

<script>
import A from './A.vue';
import B from './B.vue';

export default {
  data: {
    currentView: 'A'
  },
  components: {
    A,
    B,
  }
})

luego

function getComponent(){
  if (..)
    this.currentView = 'A';
  else if (..)
    this.currentView = 'B'
  ...
}

También puede vincular componentes directamente, de acuerdo con el manual:

https://vuejs.org/v2/guide/components.html#Dynamic-Components

---

---

Utiliza Nuestro Buscador