(1)全局注册 (2)局部注册 (3)is挂载组件 table、ul、ol、select这些标签会限制其内的元素,这时可以使用is来挂载组件 (4)组件也可以有data,method,computed等属性。但是data是函数,数据需要return出去。 (5)解决多个组件之间数据共享问题 给组件
转载 2017-12-18 12:00:00
787阅读
2评论
借用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阅读
如果我们写一个弹窗,弹窗中存在关闭按钮、输入框、发送按钮等。你可能会问,这有什么难的,你就是几个div、input吗?好,那现在需要升级了,这几个控件还有别的地方要用到。没问题,复制黏贴呗。那如果输入框要带数据验证,按钮的图标支持自定义呢?这样用JavaScript封装后一起复制呗。那等到项目快完结时,产品经理说,所有使用输入框的地方要改成支持回车键提交。好吧,给我一天的时间,我一个一个加上去。上面的需求虽然有点变态,但却是业务中很常见,那就是控件,Javascript能力的复用。没错,Vue.js的组
原创 2021-04-29 13:57:14
1092阅读
1、组件复用 2、slot元素作为组件模板之中的内容分发插槽,元素自身可以被替换
vue
原创 2021-07-14 11:01:41
315阅读
  先来说下需求,就是一个表单,会有树形结构一样,会有子表单,表单显示什么内容是后台通过接口数据来确定的;这个时候就和树形结构一样,肯定会有子组件的递归;这次是自己第一次写递归,遇到了三个问题记录下;1、第一个问题就是,循环表单;看下图   然后这里的数据返回的是这样的:  说明下数据字段的含义:name属性算是表头,然后里面的valueType代
转载 2024-03-26 17:48:49
108阅读
Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。 从维护视图到维护数据,Vue.js 让我们快速地开发应用。但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难。 同时,Vue.js 的接口和语法十分自由,
原创 2022-04-06 10:56:01
350阅读
一、什么是组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 二、组件用法组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。2.1 全局注册后,任何V ue 实例都可以使用。如:<div id="app1"> <my-component></my-compo
转载 2023-06-25 16:18:24
99阅读
在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。Vue 组件的 API 来自三部分 - props, events 和 slots :Props 允许外部环境传递数据给组件Events 允许组件触发外部环境的副作用Slots 允许外部环境将额外的内容组合在组件中。使用 v-bind 和 v-on 的简写...
原创 2021-07-07 13:41:03
168阅读
在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。Vue 组件的 API 来自三部分 - props, events 和 slots :Props 允许外部环境传递数据给组件Events 允许组件触发外部环境的副作用Slots 允许外部环境将额外的内容组合在组件中。使用 v-bind 和 v-on 的简写...
原创 2022-03-24 11:04:29
204阅读
做过后端管理系统的“猿们”都知道,后端界面的框架无非就是左右结构【左边是菜单栏,右边是具体业务的功能界面】。但是右边的功能界面,我们又能拆分出来一些公用的控件:搜索栏、操作按钮栏、列表【table、tree、treetable】等,今天小编大致说下自定义操作按钮栏控件的封装以及实现。首先,在做自定义控件之前,我们要想清楚我们封装自定义控件的目的,以目标为导向去实现。(以上内容纯属片汤话儿)1.目的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
原创 2022-07-22 09:31:25
105阅读
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列
转载 2018-11-29 11:08:00
111阅读
2评论
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列
转载 2018-12-12 20:53:00
109阅读
2评论
封装组件的步骤  建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。      准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。  准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。  封装完毕了,直接调用即可。Vue组件间的参数传递1.父组件与子组件传值   父组件传给子组件:子组件通过props方法接受数据;  子组
转载 2024-03-25 09:05:06
90阅读
Vue.js中,构建可复用组件库是提高代码复用性和维护性的关键。下面是一些设计模式示例,说明如何创建可复用Vue组件: 1. 单文件组件(Single File Component, SFC) Vue.js组件通常是单文件组件,包含HTML、CSS和JavaScript。一个简单的可复用组件例子如下: <template> <div class="my-com
原创 精选 2024-08-17 22:31:28
189阅读
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 英国一家公司产品,据说功能强大,国内用的较少,对应中午文档就少,社区版开源免费,复杂一些的功能,如导出需要 ...
转载 17天前
348阅读
VUE框架实现组件化开发使用模板实现组件复用------VUE框架
原创 2023-12-04 15:05:52
121阅读
1点赞
1、mixins(已废弃)https://reac
原创 2022-09-13 12:19:05
159阅读
  • 1
  • 2
  • 3
  • 4
  • 5