借用table组件会说一下父子组件的传值。子组件Table.vue,排名用index,并且自递增,标题的值和数据都是通过父组件传过来的。子组件通过props设置tabHeades:Array,tabDatas:Array接收iu父组件传过来的数组。<template> <li class="tab-wrapper"> <ul class="tab...
原创 2022-01-10 15:32:07
914阅读
  先来说下需求,就是一个表单,会有树形结构一样,会有子表单,表单显示什么内容是后台通过接口数据来确定的;这个时候就和树形结构一样,肯定会有子组件的递归;这次是自己第一次写递归,遇到了三个问题记录下;1、第一个问题就是,循环表单;看下图   然后这里的数据返回的是这样的:  说明下数据字段的含义:name属性算是表头,然后里面的valueType代
转载 2024-03-26 17:48:49
108阅读
做过后端管理系统的“猿们”都知道,后端界面的框架无非就是左右结构【左边是菜单栏,右边是具体业务的功能界面】。但是右边的功能界面,我们又能拆分出来一些公用的控件:搜索栏、操作按钮栏、列表【table、tree、treetable】等,今天小编大致说下自定义操作按钮栏控件的封装以及实现。首先,在做自定义控件之前,我们要想清楚我们封装自定义控件的目的,以目标为导向去实现。(以上内容纯属片汤话儿)1.目的
 将页面拆分为多个组件,简化了页面开发,方便维护,组件也可以复用。 组件的类型通用组件,比如表单、弹窗、菜单栏、分页组件等业务组件,实现某一业务的组件,比如抽奖组件页面组件,也叫做单页,一个页面就是一个组件,只完成功能,不复用 组件开发流程:声明、注册、使用  demo  组件使用流程   <div id="app">div>               <script&g
转载 2021-05-10 17:58:31
256阅读
2评论
vue 组件开发
原创 2021-07-15 11:44:34
88阅读
一、整体目标 了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使gdefault事件事件名称说明回调参数click按钮点击事件(even
原创 2022-09-13 12:19:53
106阅读
功能基本包括常用表格中遇到的分页、搜索、删除、AJAX操作。由于是用的HANDLEBARS渲染的,所以样式可能很好的控制,要加新的功能也较容易。
原创 2021-06-04 15:04:01
953阅读
概要 vue 的一个特点是进行组件开发组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等。 组件开发vue 中一个组件,就是一个独立的.vue 文件,这个文件分为三部分。 1.模板 2.脚本 3.样式 我们看一个系统中最常用的组件。 定义好组件后,
原创 2021-07-22 15:06:55
208阅读
封装组件的步骤  建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。      准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。  准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。  封装完毕了,直接调用即可。Vue组件间的参数传递1.父组件与子组件传值   父组件传给子组件:子组件通过props方法接受数据;  子组
转载 2024-03-25 09:05:06
90阅读
Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式。以弹窗组件为例,一种实现是在需要模板中引入需要弹窗展示的组件,然后通过一个flag变量来控制弹窗的组件,在业务代码里面会充斥着冗余的弹窗组件逻辑,十分不优雅。本文整理了开发Vue组件的一些技巧,包含大量代码示例。开发环境vue-cli3提供了非常方便的功能,可以快速编写一些测试demo,是开发组件必备的环境。
1、<a-table></a-table>标签中添加属性 :pagination="pagination" 2、data中设置pagination pagination: { current: 1, pageSize: 10, showSizeChanger: true, total: this.t ...
转载 2021-10-20 14:20:00
3120阅读
2评论
公司前端框架使用element plus,自带的table比较基础,稍微复杂一点的功能就需要手搓或者引入其他组件库,所以查找了一下其他功能更完善的table组件,结果如下: 1.AG Grid 英国一家公司产品,据说功能强大,国内用的较少,对应中午文档就少,社区版开源免费,复杂一些的功能,如导出需要 ...
转载 16天前
348阅读
全局组件注册 //1.开发全局组件 Vue.component('login',{ template:'<div><h1>用户登录</h1></div>' }); //2.使用全局组件Vue实例范围内 <login></login> # 注意: - 1.Vue.component用来开发全局组件 ...
转载 2021-09-13 18:12:00
155阅读
2评论
利用marked 和 highlight.js开发markdown组件 实现效果图如下: markdown组件已这种形式<Markdown v model="markdown"></Markdown>来绑定markdown的值我们可以通过 value prop 和 input
转载 2018-11-14 18:08:00
256阅读
2评论
1)main.js (2)app.vue (3)button.vue 使用import导入css方法: (4)title.vue 3、效果
转载 2017-12-28 15:48:00
171阅读
2评论
学习组件开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。 组件开发思想,组件注册,组件调式,组件间的数据交互,组件插槽 组件化规范,就是多的可能性重用 全局组件注册语法 vue.component(组件名称
转载 2020-10-16 12:32:00
110阅读
2评论
组件开发也许根本就没有终极理论,而且即便有我们也找不到。但是努力寻求完整的理解总比对人类精神的绝望要好得多。 ——霍金《霍金讲演录》文章目录组件开发一、组件开发介绍1.组件是什么?有什么用?组件的分类:工程化开发之后:2.什么是组件化?人面对复杂问题的处理方式:组件化也是类似的思想:组件化定义:3.Vue组件化思想组件化是Vue.js中的重要思想组件化思想的应用:二、组件编写方式1.组件注册基本步骤2.注册组件步骤解析1.Vue.extend():2.Vue.component
原创 2021-05-20 10:29:26
637阅读
目录组件的使用向组件中插入内容使用槽点使用子组件组件之间的通信父子组件之间的通信非父子组件之间的通信 将页面拆分为多个组件,方便复用。组件可分为3类通用组件:表单、弹窗、菜单栏、分页等业务组件:实现某一业务功能的组件,比如抽奖组件页面组件(单页):一个组件即一个页面,完成特定功能,一般不复用组件开发流程:声明、注册、使用 组件的使用全局声明+局部注册<div id="app"></div><script> //声明组
原创 2021-09-07 16:04:55
344阅读
Vue组件开发 步骤 Vue.extend创建组件构造器,并传入template自定义我们的模板 Vue.component注册组件,传入两个参数('注册组件的标签名',组件构造器) 必须挂载到Vue实例中使用组件标签 注意: 组件构造器必须在new Vue的前面创建,注册。不然无法使用 temp
原创 2022-01-10 17:03:32
284阅读
Vue 组件开发 1.组件的使用步骤创建组件构造器注册组件使用组件上述第二步组件注册方式为全局组件的注册方式,如果使用局部组件,需要在 Vue 实例中进行注册。2.父组件和子组件const component = Vue.extend({ template: ​​ <div> <h2>组件开发</h2> </div> ​​ }); Vue.comp
原创 2022-03-17 16:30:56
294阅读
  • 1
  • 2
  • 3
  • 4
  • 5