Flask template+Vue +项目中include引入其他模版(其他模版也会用到vue)的使用探索

项目背景是:团队的历史项目,是flask tmeplate写的前段页面。然后我在一个页面A.html中引入了vue文件,使用了vue+element_ui技术。现在想在此A页面中插入另外一个页面B.html的内容(试图tab分开),因为入口只有A页面作为入口,想要在B.html中实现不同与A的功能。

尝试1,html文件中可以存在多个vue实例




    
    Title
        
        

        
     
    
    


{{done}}
    

{{ "{{" }} msg {{ "}}" }}

hello

{{ "{{" }} title {{ "}}" }}

hello

前端:

Flask template+Vue +项目中include引入其他模版(其他模版也会用到vue)的使用探索_第1张图片

但是全都写到一起,虽然可以分为两个vue实例来处理,但是不想两个功能的html代码和vue代码参和在一个文件中,导致一个文件太大太乱。 

尝试2,可以通过 flask template的jinjia语法 include来引入外部模块 (注意此种用法不是很大众,出现了问题,并未解决,急需大牛帮我看看问题所在,不胜感激!!)

比如在A.html中的某个位置

{% include './new_module/B.html' %}

导入B的内容。A.html内容如下:

div id="order">
  
        
             A部门工单申请
            
A页面的主要内容
B部门工单申请 {% include './order_manage/param_test.html' %}

注意:导入的内容是无法解析

出现的错误如下: 

vue.js:634 [Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

页面也能正常加载Flask template+Vue +项目中include引入其他模版(其他模版也会用到vue)的使用探索_第2张图片

查看页面源码,发现B.hmtl的代码已经加载进入A.html中,但是控制台查看元素中button中是没有绑定相关click代码的。

  
         B部门工单申请




                    





 ......

 

但是出现了问题:方法无法调用!!!至今没找到解决办法

点击页面的按钮,方法没有被调用,隐约觉得原因是因为include加载模块后渲染没有识别vue的代码写法丢弃了。但是为啥能识别elment_ui的写法呢?不解....

Flask template+Vue +项目中include引入其他模版(其他模版也会用到vue)的使用探索_第3张图片

尝试3,使用import导入script vue代码,然后vue实例加载template模版

此种方法B.html内容是:




{% macro create_param_search() %}

          var create_param_search = new Vue({
            el: '#param_order_search_top',
            data: function () {
                return {
                    sub_msg: "感谢阅读",
                    bye_msg: "bye bye",
                    form:{
                        name:"参数名称"
                    }
                }
            },
               mounted:function (){
                console.log("create_param_search mounted")
                this.is_test_method()
               },
              methods:{
                is_test_method(){
                    console.log("is_test_method")
                }
              }
        })
{% endmacro %}

 A.html中展示B内容的区域的代码为:

 
下面是挑战性内容哦!!
.......

你可能感兴趣的:(flask,vue.js,python)