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