zoukankan      html  css  js  c++  java
  • 【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:

    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>
    

      

  • 相关阅读:
    浏览器 页面报错
    TP单字母函数
    TP系统常量、项目后台的搭建、模板中常量字符串替换
    ThinkPHP3.2的简单知识
    面向对象基本概念,关键字,类的组成,静态,三大特性,创建类和对象,设计模式
    layui(弹出层)
    头像文件上传 方法一:from表单 方法二:ajax
    上传文件
    流程增加,发起事件,流程显示,处理。
    分页,条件查找后再分页
  • 原文地址:https://www.cnblogs.com/nonkicat/p/6490285.html
Copyright © 2011-2022 走看看