Зарегистрировать компонент Vue.js динамически из строки

Question

У меня есть CRUD, который позволяет мне писать код компонента Vue.js в текстовой области, например:

<template>
<div><p class='name-wrapper'>{{ model.name }}</p></div>
</template>
<script>
module.exports = {
  name: 'NameWrapper',
  props: ['model']
}
</script>
<style lang='sass'>
.name-wrapper
  color: red
</style>

Затем в другом компоненте я получаю эти данные и хочу зарегистрировать их как динамический / асинхронный, пользовательский компонент, такой как:

<template>
<component :is='dynamicName' :model='{name: "Alex"}'></component>
</template>
<script>
import httpVueLoader from 'http-vue-loader'
import Vue from 'vue'

export default {
name: 'DynamicComponent',
props: ['dynamicName', 'componentDefinitionFromTextareaAsString'],
beforeCreate: {
  // I know that as a second parameter it should be an url to the file, but I can't provide it, but I would like to pass the contents of the file instead there:
  httpVueLoader.register(Vue, this.$options.propsData.componentDefinitionFromTextareaAsString)
  // I was trying also:
  Vue.component(this.$options.propsData.dynamicName, this.$options.propsData.componentDefinitionFromTextareaAsString)
}
}
</script>

Насколько я знаю, httpVueLoader нужен URL вместо файла .vue - есть ли способ передать туда сам код компонента?

Мне известно, что передача и оценка содержимого тега <script></script> может вызвать проблемы с безопасностью, но мне действительно нужно сделать это таким образом.

Я также читал о функции компиляции Vue.js, но она работает только для шаблонов, но не для кода компонента (поэтому теги script снова).

Это дажеможно ли добиться такой функциональности в Vue.js?

Answer 1

Должно быть возможно использовать data: URI с http-vue-loader, например:

const vueText = `
  <template>
      <div class="hello">Hello {{who}}</div>
  </template>
 
  <script>
  module.exports = {
      data: function() {
          return {
              who: 'world'
          }
      }
  }
  <\/script>
 
  <style>
  .hello {
      background-color: #ffe;
  }
  </style>
`

const MyComponent = httpVueLoader('data:text/plain,' + encodeURIComponent(vueText))

new Vue({
  el: '#app',
  
  components: {
    MyComponent
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.4.1/src/httpVueLoader.js"></script>

<div id="app">
  <my-component></my-component>
</div>

Если по какой-то причине это не сработает (возможно, из-за того, что один из ваших целевых браузеров не поддерживает его), вы можете заставить его работать, исправив httpRequest.См. https://www.npmjs.com/package/http-vue-loader#httpvueloaderhttprequest-url-. Документация посвящена исправлению httpRequest для использования axios, но вы можете исправить это, чтобы просто разрешить обещание для соответствующего текста.