位置: 编程技术 - 正文

详解Vue组件实现tips的总结(vue组件的使用步骤)

编辑:rootadmin

推荐整理分享详解Vue组件实现tips的总结(vue组件的使用步骤),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 组件,vue组件的使用步骤,vue组件的使用步骤,vue组件怎么使用,vue组件教程,vue组件用法,vue组件教程,vue组件用法,内容如对您有帮助,希望把文章链接给更多的朋友!

官网上已经有的内容,我就不再赘述了,直接在官网上查看即可,这里蚊子想换个角度来讲解下vue的组件。

组件,顾名思义,就是把一个相对独立,而且会多次使用的功能抽象出来,成为一个组件!如果我们要把某个功能抽象为一个组件时,要做到这个组件对其他人来说是个黑盒子,他们不用关心里面是怎么实现的,只需要根据约定的接口调用即可!

我用一张图稍微总结了下Vue中组件的构成:

可以看到组件中包含的东西还是蛮多的,而且,还有很多的点没有列出来,这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理,只讲使用。

我们以一个tips弹窗为例,来综合运用下组件的知识点。tips弹窗,几乎所有的框架或者类库,都会有弹窗这个组件,因为弹窗这个功能平时非常普遍,而且模块解耦度高!

1. 接口约定

我们这里实现的弹窗,能用到的知识点有:props, event, slot, ref等。这里我们也能看到各个知识点是怎么运用的。

2. modal组件的实现

tips组件相对来说实现的比较简单,仅用作提示用户的简单弹层。

详解Vue组件实现tips的总结(vue组件的使用步骤)

模板:

模板中将结构分成了三部分,标题、内容和操作区域。这里既可以使用props传递字符串,也可以使用slot进行定制。

tips样式:

组件内的方法:

3. 调用tips组件

首先我们开始渲染组件:

点击显示按钮后展示tips:

4. 总结

在这个简单的tips组件里,我们实现了用props传递参数,用$emit向外传递参数,用slot插槽来定制内容。

需要注意的是:组件props是单向绑定,即父组件的属性发生变化时,子组件能接收到相应的数据变化,但是反过来就会出错。即不能在子组件中修改props传过来的数据,来达到修改父组件属性的目的。这是为了防止子组件无意修改了父组件的状态。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。如果真的需要在子组件里进行修改,可以用这两种方法应对:

定义一个局部变量,并用 prop 的值初始化它:

定义一个计算属性,处理 prop 的值并返回。

当然,这只是单页面中组件的实现,更复杂的组件后续我们也会实现。

标签: vue组件的使用步骤

本文链接地址:https://www.jiuchutong.com/biancheng/375846.html 转载请保留说明!

上一篇:Angular 4根据组件名称动态创建出组件的方法教程(angular子组件调用父组件的方法)

下一篇:AngularJs ng-change事件/指令的用法小结

  • 三公经费指的是什么
  • 公司给员工代办失业证
  • 计税工资和实发工资不一样所得税
  • 微店企业和个人的区别
  • 支付给外包公司的工资备注怎么写
  • 一般纳税人主表第一栏数据
  • 专用发票压线了可以拒收吗
  • 过路费按照什么缴纳增值税
  • 汽车开公司发票可以抵税吗?
  • 工商年检股东变更流程
  • 代理缴费业务主要包括
  • 变更企业性质企业怎么办
  • 经营二手车怎么交税
  • 存货账面价值等于成本吗
  • 服务行业营业成本包括财务费用和管理费用吗
  • 通过无偿取得的成果
  • 工资3500该不该辞职
  • 企业多扣个税怎么处理
  • 建筑业交税会计分录
  • 增值税减税措施有哪些
  • 餐饮费发票税率是多少
  • 未办理土地使用证违反了什么法律
  • 核定征收金额如何确定
  • 工商营业年报怎么做
  • 小规模应交税费有三级科目吗
  • 长期资产的含义
  • 发票跨期审计调查报告
  • 苹果电脑itu
  • 为什么叫win7
  • 所得税以前年度亏损
  • 免征的农资增值税怎么算
  • 部shu
  • 建筑行业怎么做职业生涯规划
  • 年底所得税账务处理
  • 违反发票管理规定2次公告内容
  • icon图标教程
  • framework 4 client profile 不动
  • css去掉项目符号
  • vue聊天系统
  • 注意力机制cbam
  • vue使用教程
  • 车间一般耗材计入
  • 尚品汇在哪
  • 命令查看系统信息
  • python的顺序
  • 公司让员工提前离职,可以结清工资吗
  • 应付债券和应付利息
  • 上年度的企业所得税汇算清缴怎么查询
  • phpcms二次开发教程
  • centos上安装vscode
  • MongoDB db.serverStatus()输出内容中文注释
  • 商铺转让费的会计分录
  • 企业所得税上个季度没报
  • 资产负债表中利息收入填在哪
  • 招待费专票不可以抵扣
  • 同在一个单位
  • 小规模纳税人开的专票对方可以抵扣吗
  • 净利润为负数还计提盈余公积吗
  • 软件公司se
  • iis如何重新配置
  • centos named
  • win7系统IE浏览器打开跳转到360浏览器,怎么阻止
  • linux中如何更改主机名
  • windows8装 .NET 3.5 时出现0x800F0907错误解决方法
  • win7共享设置(详细图文步骤)
  • awk命令详解
  • python生成密钥
  • python的linux
  • jsonp如何解决跨域问题
  • 在python中的用法
  • shell 1
  • 手把手教你用python破解wifi
  • 【Rayeager PX2分享】OpenCV入门之线段检测
  • jQuery 获取跨域XML(RSS)数据的相关总结分析
  • python中的stringvar
  • python读写segy数据
  • 个体加油站税务怎么申报
  • 生产企业出口退税退的是哪部分的税
  • 佛山退休办理
  • 如何进行税务筹划工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设