【Vue】动态加载Html片段

最新推荐文章于 2025-05-27 14:36:04 发布

weixin_30457465

最新推荐文章于 2025-05-27 14:36:04 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端数据库 ViewUI

原文链接：http://www.cnblogs.com/nonkicat/p/6490285.html

在Vue应用中，为了解决组件过多导致的打包问题，通常需要按需动态加载HTML片段。当使用v-html指令加载HTML时，发现内嵌的JS代码无法执行。解决方法是将组件分离为HTML和JS文件，先通过AJAX获取HTML，然后成功后使用require加载JS文件，确保JS的正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/nonkicat/p/6490285.html