【Vue】动态加载Html片段

在编写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：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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文件。

修改后的代码如下（注：只是示例，不代表能跑得通）：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

主界面 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>