Vue - загрузка внешних компонентов с другого сайта - PullRequest
Новая
       26

Vue - загрузка внешних компонентов с другого сайта

0 голосов
/ 08 февраля 2019

Я пытаюсь извлечь компонент vue с внешнего сайта и загрузить его в мое приложение, и я не могу понять это на всю жизнь.

Вот полный сценарий;

  • Сайт A (сайт с внутренним размещением) загружает приложение VueJS
  • Сайт A запрашивает компонент VueJS с сайта B (сайт с внутренним размещением, другой поддомен)
    • В идеале сайт B должен состоять изфайлов .vue либо в их собственном формате .vue, либо в предварительно скомпилированном (может быть, vue-cli для этого?)
  • Сайт A загружает и отображает компоненты в приложении

Допустим, у меня есть очень упрощенный компонент, который я хочу загрузить с сайта B; 

{
    "template": "<div><span>{{message}}</span></div>",
    "data": function() {
        return { "message": "Hello World" };
    }
}

Я попробовал следующее со смешанными результатами;

Внутри моего index.ts(используя TypeScript) 

Vue.component('my-external-component', () => (Vue as any).http.get("http://test.local/test.js"));

и внутри моего файла .vue 

<my-external-component></my-external-component>

В результате этот комментарий добавляется в DOM 

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

, однако добавляется 

<component :is="my-external-component"></component>

Результатом добавления пустого комментария кDOM 

<!---->

Я также сделал несколько вариантов этого, включая использование cli для компиляции шаблона в файл js и попытку загрузки этого, странную ошибку из-за невозможности доступа к template.trim или чему-то ещевдоль этих линий.

1 Ответ

0 голосов
/ 08 февраля 2019

Учитывая, что ваше определение компонента является (или было) JSON, а компонент data должен быть функцией, вы должны преобразовать результат перед разрешением асинхронного компонента.

Например (используя fetch, потому что яне знаю, что такое Vue.http) 

Vue.component('MyExternalComponent', () =>
  fetch('http://test.local/test.json').then(res => res.json()).then(defn => ({
    ...defn,
    data () { // transform defn.data into a function
      return defn.data
    }
  }))
)

Демонстрация JSFiddle здесь с использованием их /echo/json сервиса для имитации определения внешнего компонента.

Экспорт определения компонента из удаленного файла .js будет сложным.

...