前端最有成就感一

这样的需求：点击不同的标签页显示不同的分页数据

同样的标签，不同的内容，我是有几种内容就写几个标签吗？
**成就感一：只写一次el-tab-pane，label动态绑定data中的nameList数组的每一项(item)
运用知识点:v-bind动态绑定属性，v-for遍历数组的每一项，key给每一个节点做唯一标识

点击el-tab-pane显示不同表格内容，我是直接在该标签内写吗？
成就感二：通过使用动态组件，完成点击不同标签页时的页面切换。同一文件夹下声明子组件-》父页面导入子组件-》components属性中挂载子组件-》使用子组件。
**遇到的小问题：导入子组件时:import table from ‘./table’ -》使用时
< table> < /table>出错，因为table标签有原有意义，要避重名

父子组件传值：
父传子：在父组件使用子组件时自定义属性，在子组件中通过props接收
子传父：$emit通过事件传值
！！！但是现在情况是：由于标签是循环来的，如果写死所传的值如下
那么会造成每一个标签所接收的msg均为"hello"，但显然我们的需求是点击不同标签页时向父组件传递不同的内容（父组件向子组件触发事件传值）

**vue中操作dom的方法:通过ref=‘msg’起名称，this. $refs.msg获取dom对象，但由于是循环创建的，所以通过
this. $refs.msg[tab.index]获取当前点击的dom元素

成就感三：子组件声明的函数，父组件调用该函数传值

子组件拿到标签名称name，封装对象查询并显示便轻而易举了

前端最有成就感一—-封装相关推荐

Map map = request.getParameterMap(); BeanUtils.populate(bean, map);对前端表单的迅速封装与判断
java对前端表单的迅速封装与判断Map map = request.getParameterMap(); BeanUtils.populate(bean, map);
bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
组件封装是一个前端工程师进阶的必经之路.组件封装是指Web页面上抽出来一个个包含模版(HTML).功能(Javascript)和样式(CSS)的单元.所以,今天的内容,我们将带你了解组件封装的开发思路 ...
layui前端项目打包方法_layui封装模块基础教程
layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块. 平常使用中,ajax可以说使用广泛,所以这里我们添加 ...
33个前端常用的JavaScript函数封装方法
星标公众号前端开发博客,回复"交流" 加入我们一起学习,天天进步这是我在实际开发中常用的一些js函数方法,总结一下,以后可以,有需要的小伙伴可以参考下百度就完事了,不不不!我亲 ...
关于前端开发中常用组件封装的一些思考、技巧分享，基本上所有的项目都适用
看过了大多数文章,都是讲解的知识点,但知识点的话我们很容易查询各种文档.书籍了解到,但实用的技巧就很难, 需要自己工作有一定的经历,经常封装各种组件,思考才能得来.本文的讲解是我本人真实的项目经历总结 ...
前端 JavaScript 设计模式前奏--面向对象-封装、继承、多态
JavaScript 面向对象如图所示: 1. 什么是面向对象 1. 面向对象的概念 2. 面向对象的三要素: 继承/封装/多态 ⭐️ 3. JS 的应用举例 4. 面相对象的意义 --- 数据结构 ...
JS实现博客前端页面（一）—— 封装基础库
1.创建基本库首先创建一个基本库,名字叫做base.js,用于编写最常用的代码,然后不断的扩展封装. 在最常用的代码中,最常用的就是获取节点的方法.这里我们可以编写代码如下: //创建base.js ...
教你用CSS从零做漂亮网页，这样学习前端太有成就感了
层叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码.本节将介绍 CSS 的基础知识,并解答类似问题:怎样将文本设置为黑色或红色?怎样将内容显示在屏幕的特定位置 ...
前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...

前端最有成就感一—-封装

前端最有成就感一—-封装相关推荐

最新文章

热门文章