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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
用javascript做拖动布局的思路
May 31 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
js获取滚动距离的方法
May 30 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
Vue.js实现表格渲染的方法
Sep 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获取指定日期是星期几的实现方法
2016/11/30 PHP
菜单效果
2006/10/14 Javascript
在视频前插入广告
2006/11/20 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
企划经理的岗位职责
2013/11/17 职场文书
解除施工合同协议书
2014/10/17 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
计划生育诚信协议书
2014/11/02 职场文书
教师先进个人材料
2014/12/17 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python