Vue2.0学习(四)--组件的继承与扩展
0.3542018.08.18 20:48:44字数 794阅读 8,669
Vue2.0
如果有需要源代码,请猛戳源代码
希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢
前言
本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和extend的用法。
一、slot
1.默认插槽和匿名插槽
slot用来获取组件中的原内容。有的时候为插槽提供默认的内容是很有用的,例如,一个 组件可能希望这个按钮的默认内容是“如果没有原内容,则显示该内容”,但是同时允许用户覆写为别的内容。
image
2.具名插槽
有些时候我们需要多个插槽, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
image
二、mixins
1.mixins简介
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins 选项接受一个混合对象的数组。
2.mixins用途
一般有两种用途:
1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。
例如下面的例子:实现每次数据变化时都能够在控制台打印出提示:"数据发生变化"
image
3.mixins的调用顺序
上例说明了:从执行的先后顺序来说,混入对象的钩子将在组件自身钩子之前调用,如果遇到全局混入(Vue.mixin),全局混入的执行顺序要前于混入和组件里的方法。
三、extends
1.extends用法
extends选项允许声明扩展另一个组件,而无需使用 Vue.extend。
通过外部增加对象的形式,对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。
image
从上面的例子也可看出,执行的先后顺序和mixins一样,另外扩展的方法与原生的冲突时,扩展的方法不生效,这点跟混入一样。
2.extends和mixins优先级比较
image
由此可以得出,相对于mixins,extends触发的优先级更高
四、extend
Vue.extend只是创建一个构造器,它是为了创建可复用的组件。其主要用来服务于Vue.component,用来生成组件
如果觉得文章对你有些许帮助,欢迎在我的GitHub博客点赞和关注,感激不尽!
参考文章