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 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
js中arguments对象的深入理解
May 14 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
实例讲解Python3中abs()函数
2019/02/19 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
母亲节感恩寄语
2014/02/21 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年司法所工作总结
2015/04/27 职场文书
MySQL优化及索引解析
2022/03/17 MySQL