在编写Vue页面的时候，会碰到这么一个需求。由于页面组件比较多，不可能一次性将所有的页面都打包，只能按需获取相应的页面进行显示。
比如有一个App页面，需要异步获取html片段通过v-html指令加载到content这个组件中。
<div id='app'>
<content v-html='html' />
<input type='button' @click='appendContent' >appendContent</input>
</div> <script type="text/x-template" id='content-template'>
<div class='content' v-html='html'> </div>
</script>
APP JS：
var content = Vue.components('content',{
props:['html'],
template:'#content-template'
});
var app = new Vue({
el:'#app',
data:{
html:''
},
methods:{
appendContent:function() {
$.ajax({
type:'GET',
url:'content.html'
success:function(response){
this.html = response;
}
});
}
}
});
组件
<div id='content'>
<test1 />
<test2 />
</div> <script type="text/x-template" id='test1-template'>
<div>Test 1 Component</div>
</script> <script type="text/x-template" id='test2-template'>
<div>Test 2 Component</div>
</script> <script>
var test1 = {
template:'#test1-template'
}; var test2 = {
template:'#test2-template'
}; var subcontent = new Vue({
el:'#content',
components:{
'test1':test1,
'test2':test2,
}
});
</script>
但是实际执行的时候会发现，组件没能正确渲染。折腾了一通，发现原来v-html指令原来有个坑，插入片段的时候，js代码无法执行。
因此需要改变一下执行顺序。
- 1.将组件拆分成html和js两个文件。
- 2.先用ajax读取html文件。
- 3.成功获取html文件后，通过require获取js文件。
修改后的代码如下（注：只是示例，不代表能跑得通）：
主界面 html
<div id='app'>
<content v-html='html' />
<input type='button' @click='appendContent' >appendContent</input>
</div> <script type="text/x-template" id='content-template'>
<div class='content' v-html='html'> </div>
</script> 主界面 js var content = Vue.components('content',{
props:['html'],
template:'#content-template'
}); var app = new Vue({
el:'#app',
data:{
html:''
},
methods:{
appendContent:function() {
$.ajax({
type:'GET',
url:'content.html'
success:function(response){
this.html = response;
require(['content'],function(){});
}
});
}
}
}); 组件 html
<div id='content'>
<test1 />
<test2 />
</div> <script type="text/x-template" id='test1-template'>
<div>Test 1 Component</div>
</script> <script type="text/x-template" id='test2-template'>
<div>Test 2 Component</div>
</script> 组件 js <script>
var test1 = {
template:'#test1-template'
}; var test2 = {
template:'#test2-template'
}; var subcontent = new Vue({
el:'#content',
components:{
'test1':test1,
'test2':test2,
}
});
</script>