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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
RequireJS使用注意细节
May 15 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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基础知识回顾
2012/08/16 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JS的反射问题
2010/04/07 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
利用JavaScript写一个简单计算器
2021/11/27 Javascript
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript