详解Vue2.0组件的继承与扩展
前言
创新互联建站服务项目包括杜集网站建设、杜集网站制作、杜集网页制作以及杜集网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,杜集网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到杜集省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和extend的用法。
一、slot
1.默认插槽和匿名插槽
slot
用来获取组件中的原内容,此方式用于父组件向子组件传递“标签数据”。有的时候为插槽提供默认的内容是很有用的,例如,一个
组件可能希望这个按钮的默认内容是“如果没有原内容,则显示该内容”,但是同时允许用户覆写为别的内容。
180812 welcome to xiamen
如果没有原内容,则显示该内容 // 默认插槽
2.具名插槽
有些时候我们需要多个插槽,
元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
- aaa
- bbb
- ccc
- 111
- 222
- 333
welcome to xiamen
二、mixins
1.mixins简介
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins 选项接受一个混合对象的数组。
2.mixins用途
一般有两种用途:
1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。
例如下面的例子:实现每次数据变化时都能够在控制台打印出提示:"数据发生变化"
Mixins
num:{{ num }}
如果有需要源代码,请猛戳源代码
参考文章
Vue官方文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文名称:详解Vue2.0组件的继承与扩展
文章出自:http://scyanting.com/article/ijhigo.html