位置: 编程技术 - 正文

详解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事件/指令的用法小结

  • 递延所得税资产怎么计算
  • 中华人民共和国宪法
  • 发债评级机构 有哪些
  • 加计扣除要交所得税嘛
  • 拓展费税收分类编码
  • 一般企业和小企业会计准则的区别
  • 固定资产减少当月
  • 其他收益科目账务处理
  • 固定资产盘亏造成的损失计入什么科目
  • 国税注销了地税没注销现在经营异常
  • 福利费开专票怎么处理
  • 减税降费政策六税
  • 跨区域预缴企业所得税
  • 税号都对开户行错了影响抵扣
  • 转出未交增值税借方余额表示什么
  • 免税企业进项怎么处理
  • 加速折旧法和直线折旧法的区别
  • 我国的社会保险费
  • 结转已经销售商品成本的分录
  • w7com端口设置
  • win10自带的清理对固态有影响吗
  • 开机自动连接宽带怎么设置w11
  • scm wms
  • php的file函数
  • 对外长期投资会计分录
  • 一次补发工资怎么算
  • 商品零售企业一般具有什么特征
  • ai绘图素材
  • 赫尔辛基哈加赫利亚大学
  • 小满秒懂百科
  • sosreport命令收集详细信息
  • 亏损弥补规定
  • 织梦怎么调用当前栏目下的文章
  • 存货成本费用
  • 子公司再设立子公司
  • 发工资是用借记卡还是储蓄卡
  • mysql运行报错
  • 如何在sql server中已有数据库进行修改
  • 增值税的视同销售行为都有哪些?
  • 个税汇算清缴什么意思?
  • 工资扣员工的罚款入什么科目
  • 英飞拓拟2.1亿出售子公司股权
  • 困难补助属于兜底政策吗
  • 公司是否可以投资股票
  • 以考核为由扣除工资
  • 机票的电子发票可以报销吗
  • 抵扣认证的发票需要还回去吗
  • 非房产企业出售土地,能否计算抵减地价款
  • 建筑发票可以一次性抵扣吗
  • 房地产开发企业土地增值税怎么计算
  • sql server 修改
  • 主键自增长的数据如何导入
  • mysql5.7主从配置
  • sql局部变量标识符
  • win7旗舰版系统怎么样
  • windowsxp怎么隐藏桌面图标
  • 记录一次博客迁移到Docker上的操作
  • xp操作系统还能用吗
  • win10预览版退回正式版
  • WinXp x64sp企业订户最新完整纯净版安装指南
  • sbsetup.exe - sbsetup是什么进程 有什么用
  • win7电脑总是自动安装乱七八糟的软件
  • win7安全模式
  • cocos creator js ts
  • ant压缩包删除
  • node.js怎么样
  • 服务器安全设备
  • python中按下某个按键
  • static function FindObjectsOfType (type : Type) : Object[]
  • python中getattr函数例子
  • 农村集体土地承包法
  • 临时工工资需要申报吗
  • 股权转让怎么计算个人所得税
  • 安阳市灵活就业人员社保补贴
  • 纳税人如何划分
  • 税控盘怎么分发
  • 朝阳区第六税务所
  • 买二套房契税可退税吗
  • 个人领税票需要哪些资料
  • 个人所得税税务审核不通过怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设