请问 Vue 远程加载组件的可行性？能不能将整个组件都远程化

[SP00F]

有一点小需求，有些组件布局及使用数据是不确定性的。

当然不会把所有都做成远程加载，只是在思考。在某些小部件上面，用远程加载的方式是否可行？

另外，如果不能实现，不知道有没有什么好的思路介绍一下，谢谢

两个方法我都试过了。第二种比较好，但是问题在于 Props 如果要求发生改变了或者改动了怎么办。

上个简单的示例

第一种方法

A.vue

<template>
  <div>
    <h1>这是父组件<h1>
    <div class="remoteload"></div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'ok',
  methods: {
    getRemoteTemplate () {
      this.$fetch.get('/static/1.html')
        .then(res => {
          let Comp = Vue.extend({template: res.data})
          new Comp().$mount('remoteload')
        })
    }
  }
}
</script>

1.html

<p>我是远程加载的 template</p>

在这里，只能加载一些静态内容，达不到需要的远程加载动态组件。

再看另一种实现，写的比较粗糙。

第二种方法

A.vue

<template>
  <div>
    <h1>这是父组件<h1>
    <component :is="remote" msg="V2EX">
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'ok',
  data () {
    return {
      remote: null
    }
  },
  methods: {
    getRemoteTemplate () {
      this.$fetch.get('/static/1.html')
        .then(res => {
          let tpl = Vue.compile(res.data)
          this.remote = {
            render: tpl.render,
            props: {
              msg: {
                type: String,
                default: ''
              }
            }
          }
        })
    }
  }
}
</script>

1.html

<h1>Hello, {{msg}}</h1>

[RYAN0UP]

诶我去，刚好用的上，试试看

[stellar]

用懒加载不行吗

[luoway]

slot 即可，随你内容是什么。

[noe132]

如果是 aot build，直接使用 import()加载组件不是更好？
https://github.com/posva/vue-promised

[zjsxwc]

第二种如果 component 的数目也不确定应该怎么处理？

[SP00F]

@luoway #3 是的，slot 是可行。但是如果 slot 内容我不确定什么时候需要改一改。。。这个时候每次我都需要重新打包更新，就很繁琐。。。所以在考虑这种远程加载小部件这种情况是否可行，变动不大，也不会全都远程化。可以随时改吧改吧，只是像用到 Method、Props 这些就很难

[SP00F]

@zjsxwc #5 所以第二种方法并不是最优的。。但是比第一种方法要灵活一点点。
只是实例里的 Props 和 Data 都会写死。只能改动 template。。但是只是改动小部件的话，这样其实也差不多满足了需求

[SP00F]

@stellar 懒加载最后是一起打包了。但是现在需求是有一部分小组件随时可能改动，虽然内容是部分静态，部分动态的。所以会单独写成 HTML 的形式引入 template 只是里面接受 Props 这些数据就不太好控制了。

[SP00F]

@noe132 #4
@noe132 #4 看文档好像是用来做加载数据的

[SP00F]

@RYAN0UP #1 第二种方法如果 data 里面的 remote 不行请放到 computed 里面

[zjsxwc]

@SP00F #7 原文：“@zjsxwc #5 所以第二种方法并不是最优的。。但是比第一种方法要灵活一点点。只是实例里的 Props 和 Data 都会写死。只能改动 template。。但是只是改动小部件的话，这样其实也差不多满足了需求”
回复：

想了想我觉得如果使用了 vue 这种 template 写的话就天生会有我说的这种限制，template 带来了便利但丧失了灵活性，可能 flutter 这种全是代码调用是解决方案吧

[SP00F]

@zjsxwc #11 对啊。jsx 应该是可以的，但是 Vue 的 API 里面组件之类的除非 Vue.component()在远端获取可行的话，就没问题。主要也没有时间深入研究过 Vue。。