Question

我正在尝试从外部站点检索vue组件并将其加载到我的应用程序中，但终生无法解决。

这是完整的场景；

站点A（内部托管站点）加载VueJS应用程序
站点A向站点B（内部托管站点，其他子域）请求VueJS组件
- 理想情况下，站点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或类似内容的奇怪错误。 / p>

Answer 1

鉴于您的组件定义是（或曾经是）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 demo here使用其/echo/json service模拟外部组件定义。

从远程.js文件中导出组件定义会很棘手。

Vue-从另一个站点加载外部组件

1 个答案: