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实现控制表格行高亮实例
Jun 05 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
vue使用element-ui实现表单验证
Dec 13 Vue.js
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时间和日期函数详解
2015/05/08 PHP
php命令行写shell实例详解
2018/07/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python黑魔法之编码转换
2016/01/25 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
django的model操作汇整详解
2019/07/26 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
基于python实现地址和经纬度转换
2020/05/19 Python
详解python metaclass(元类)
2020/08/13 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
会计毕业生自荐信
2013/11/21 职场文书
工程造价与管理专业应届生求职信
2013/11/23 职场文书
医院节能减排方案
2014/06/13 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Python中Permission denied的解决方案
2021/04/02 Python