有一点小需求,有些组件布局及使用数据是不确定性的。
当然不会把所有都做成远程加载,只是在思考。在某些小部件上面,用远程加载的方式是否可行?
另外,如果不能实现,不知道有没有什么好的思路介绍一下,谢谢
两个方法我都试过了。第二种比较好,但是问题在于 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>
对啊。jsx 应该是可以的,但是 Vue 的 API 里面组件之类的除非 Vue.component()在远端获取可行的话,就没问题。主要也没有时间深入研究过 Vue。。