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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
js实现表格字段排序
Feb 19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
原生JS实现天气预报
Jun 16 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 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新手上路(八)
2006/10/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
解除劳动合同证明书
2014/09/26 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
小英雄雨来观后感
2015/06/09 职场文书
opencv检测动态物体的实现
2021/07/21 Python
Python之基础函数案例详解
2021/08/30 Python
KVM基础命令详解
2022/04/30 Servers