VUE 自定义组件模板的方法详解


Posted in Javascript onAugust 30, 2019

本文实例讲述了VUE 自定义组件模板的方法。分享给大家供大家参考,具体如下:

先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示。

关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only build of Vue where the template compiler is not available.......解决办法,如下图文件中添加 'vue$': 'vue/dist/vue.esm.js', 即可,具体原因自行百度吧。

VUE 自定义组件模板的方法详解

开始上代码:

1.最初版本的代码,这个是刚开始的时候测试一些想法

<template>
  <div >
   <ai-panel :testData="testData"></ai-panel>
  </div>
</template>
<script>
export default {
 data(){
    return {
     testData:{name:"李四"}
    }
  }
  ,components: { // 自定义组件
   aiPanel: {
    name: 'aiPanel',
    template: '<span>{{testData.name}}</span>',
    props: ['testData']//用作接收父级组件传递的参数 :testData="testData" 即可
    //这里还可以继续定义 子组件的 data,methods等
   }
  }
}
</script>

通过测试发现一些地方并不能自由的控制,例如后台传过来的html语句并不能很好的放入到子组件的template中,然后又根据vue的api重新优化了一版,如下

1.首先创建一个工具类 的js文件,js中添加如下代码

import Vue from 'vue'//引入vue
export function doComponents(opt){
 //opt 调用时传入 可以包含template的html语句,data中需要绑定的数据等
 let billItem = opt.billItem
 let billHtml =opt.billHtml;
 const myComponent = Vue.extend({
  template: billHtml,
  data() {
    return {
      billItem:billItem
    }
  },
  methods: {// 子模板中自定义事件
  }
 })
 // $mount(id)通过查找页面id手动挂载到页面
 new myComponent().$mount("#testTemplate")
}

2.页面代码如下

<template>
  <div>
     <div class="card main-form">
<!-- ai-btn是我自定义的按钮,大佬们可以换成element组件的按钮哈 -->
       <ai-btn title="查询" icon="el-icon-search" lcss="btn-org" @onClick="query"/>
     </div>
   <div ref="testTemplate" id="testTemplate">
   </div>
  </div>
</template>
<script>
import * as temp from "@/api/myTemplate";//上面 定义的js文件
export default {
 data(){
  return {
      billItem:{name:"测试"},
      billHtml:'<div class="org">{{billItem.name}}</div>',
    }
  },
  methods:{
    noResponse(){
     alert("系统升级中,暂时无法提供查询!");
    },
    query: function() {
      this.$http.post('/billing/qcdr/qryBillInfo').then((res)=> {
      //如果后台接口有数据可以 从res获取后台数据,我这里就直接用页面的测试数据了
       let option = {
         "billHtml":this.billHtml,
         "billItem":this.billItem
        }
       temp.doComponents(option);//加载模板
      }, (error)=>{
       this.$message.error("系统繁忙");
      })
    }
  }
}
</script>

这样每次查询都可以根据后台的返回的html重新生成页面 这样可以做到只需要搭建一次框架,后期可以根据客户的需求,重新配置模板,将模板中的html保存到数据库,通过指定模板展示,页面查询时,获取对应模板即可展示。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery选择器使用详解
Apr 08 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
实例浅析js的this
Dec 11 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Jquery动态列功能完整实例
Aug 30 #jQuery
vue 兄弟组件的信息传递的方法实例详解
Aug 30 #Javascript
微信小程序sessionid不一致问题解决
Aug 30 #Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 #Javascript
Vue函数式组件的应用实例详解
Aug 30 #Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 #Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 #Javascript
You might like
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python 如何快速复制序列
2020/09/07 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
老师的检讨书
2014/02/23 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
关于教师节的广播稿
2014/09/10 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
长城导游词300字
2015/01/30 职场文书
大明湖导游词
2015/02/03 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
公司与个人合作协议书
2016/03/19 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python