Vue: Verdaderos componentes dinámicos de un solo archivo

Creado en 28 may. 2020  ·  3Comentarios  ·  Fuente: vuejs/vue

¿Qué problema resuelve esta función?

Tengo una aplicación donde terceros pueden crear complementos. Me gustaría que pudieran crear esos complementos como componentes de un solo archivo, que se extraen y se muestran como componentes integrados. En este momento, la única forma de hacerlo es crear un componente de esta forma:

{
template: "<div>stuff</div>",
props: ...
etc.
}

Esto es incómodo, además de que no hay una manera fácil de incluir estilos.

Más detalles: https://stackoverflow.com/questions/62035019/load-vue-single-file-component-dynamically-at-runtime

Creo que la lógica para hacer esto existe, pero está en vue-loader, y realmente está diseñado para usarse con Webpack. Webpack no está diseñado para usarse en tiempo de ejecución.

¿Cómo se ve la API propuesta?

<template>
  <div>
    The component goes here:
    <component :is="pluginComponent"></component>
  </div>
</template>
<script>
import { compileSFC } from "vue-template-compiler";
export default {
  data() {
    return {
      pluginComponent: null
    };
  },
  mounted() {
    // fetch code from some external source here
    let code = "<template><div>hello</div></template><style>some styles</style><script>some code</script>";
    let comp = compileSFC(code);
    this.pluginComponent = comp;
  }
};
</script>

Comentario más útil

Ok, pero no hay suficiente documentación para usarlos realmente. No hay ejemplos.

Revisé un código acumulativo en busca de algunos, pero incluso la importación básica genera una tonelada de errores de compilación, la mayoría relacionados con consolidate.js:

import { createDefaultCompiler } from "@vue/component-compiler";

No marque esto como cerrado sin agregar un ejemplo de uso simple. El ejemplo podría agregarse al archivo README y también usarse para responder la pregunta de esta persona: https://github.com/vuejs/vue-component-compiler/issues/93

Todos 3 comentarios

Ya existen herramientas para lograr el proceso de compilación que existe dentro de vue-loader: https://github.com/vuejs?q=compiler&type=&language=

Ok, pero no hay suficiente documentación para usarlos realmente. No hay ejemplos.

Revisé un código acumulativo en busca de algunos, pero incluso la importación básica genera una tonelada de errores de compilación, la mayoría relacionados con consolidate.js:

import { createDefaultCompiler } from "@vue/component-compiler";

No marque esto como cerrado sin agregar un ejemplo de uso simple. El ejemplo podría agregarse al archivo README y también usarse para responder la pregunta de esta persona: https://github.com/vuejs/vue-component-compiler/issues/93

@posva Quería asegurarse de que vio mi comentario arriba.

¿Fue útil esta página
0 / 5 - 0 calificaciones