V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
SP00F
V2EX  ›  问与答

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

  •  
  •   SP00F · 2019-09-15 07:33:55 +08:00 · 3711 次点击
    这是一个创建于 1898 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    两个方法我都试过了。第二种比较好,但是问题在于 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>
    
    12 条回复    2019-09-15 19:41:44 +08:00
    RYAN0UP
        1
    RYAN0UP  
       2019-09-15 08:14:01 +08:00 via Android
    诶我去,刚好用的上,试试看
    stellar
        2
    stellar  
       2019-09-15 08:28:44 +08:00 via Android
    用懒加载不行吗
    luoway
        3
    luoway  
       2019-09-15 11:25:27 +08:00
    slot 即可,随你内容是什么。
    noe132
        4
    noe132  
       2019-09-15 12:41:36 +08:00
    如果是 aot build,直接使用 import()加载组件不是更好?
    https://github.com/posva/vue-promised
    zjsxwc
        5
    zjsxwc  
       2019-09-15 13:08:10 +08:00 via Android
    第二种如果 component 的数目也不确定应该怎么处理?
    SP00F
        6
    SP00F  
    OP
       2019-09-15 17:14:46 +08:00
    @luoway #3 是的,slot 是可行。但是如果 slot 内容我不确定什么时候需要改一改。。。这个时候每次我都需要重新打包更新,就很繁琐。。。所以在考虑这种远程加载小部件这种情况是否可行,变动不大,也不会全都远程化。可以随时改吧改吧,只是像用到 Method、Props 这些就很难
    SP00F
        7
    SP00F  
    OP
       2019-09-15 17:16:55 +08:00
    @zjsxwc #5 所以第二种方法并不是最优的。。但是比第一种方法要灵活一点点。
    只是实例里的 Props 和 Data 都会写死。只能改动 template。。但是只是改动小部件的话,这样其实也差不多满足了需求
    SP00F
        8
    SP00F  
    OP
       2019-09-15 17:20:05 +08:00
    @stellar 懒加载最后是一起打包了。但是现在需求是有一部分小组件随时可能改动,虽然内容是部分静态,部分动态的。所以会单独写成 HTML 的形式引入 template 只是里面接受 Props 这些数据就不太好控制了。
    SP00F
        9
    SP00F  
    OP
       2019-09-15 17:26:23 +08:00
    @noe132 #4
    @noe132 #4 看文档好像是用来做加载数据的
    SP00F
        10
    SP00F  
    OP
       2019-09-15 17:27:01 +08:00
    @RYAN0UP #1 第二种方法如果 data 里面的 remote 不行请放到 computed 里面
    zjsxwc
        11
    zjsxwc  
       2019-09-15 17:32:41 +08:00 via Android
    @SP00F #7 原文:“@zjsxwc #5 所以第二种方法并不是最优的。。但是比第一种方法要灵活一点点。只是实例里的 Props 和 Data 都会写死。只能改动 template。。但是只是改动小部件的话,这样其实也差不多满足了需求”
    回复:

    想了想我觉得如果使用了 vue 这种 template 写的话就天生会有我说的这种限制,template 带来了便利但丧失了灵活性,可能 flutter 这种全是代码调用是解决方案吧
    SP00F
        12
    SP00F  
    OP
       2019-09-15 19:41:44 +08:00
    @zjsxwc #11 对啊。jsx 应该是可以的,但是 Vue 的 API 里面组件之类的除非 Vue.component()在远端获取可行的话,就没问题。主要也没有时间深入研究过 Vue。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4350 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:10 · PVG 12:10 · LAX 20:10 · JFK 23:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.