前言

本文将介绍vue2.0中组件的继承和扩展，主要分享slot、mixin/extends和extends的用法。

首先，插槽

1.默认插槽和匿名插槽

Slot用于获取组件中的原始内容。此方法用于父组件将“标签数据”传递给子组件。有时为槽提供默认内容很有用。例如，my-hello组件可能希望此按钮的默认内容为“如果没有原始内容，则显示该内容”，但同时允许用户将其作为其他内容覆盖。

body div id=' it any ' my-hello 180812/my-hello/div模板id=' hello ' div欢迎来到厦门/h3slot如果没有原创内容，那么显示内容/slot//默认slot/div/templatescript var VM=new vue({ El : ' # it any '，components : { ' my-hello ' 3360 { template 3360 ' # hello ' })；/脚本

2.命名槽

有时候我们需要多个槽，槽元素有一个特殊的特性：名称。此功能可用于定义额外的插槽：

div id=' itany ' my-hello ul slot=' S1 ' liaa/Li libbb/Li liccc/Li/ul ol slot=' S2 ' li111/Li li222/Li li333/Li/ol/my-hello/div template id=' hello ' div slot name=' S2 '/slot H3欢迎来到厦门/H3 slot name=' S1 '/slot/div/template script var VM=new Vue({ El : ' # itany '，components:{ 'my-hello '/脚本

第二，混合

1.1.mixins简介

Mixins是一种非常灵活的方法，可以在Vue组件中分发可重用的功能。混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项将被混合到组件本身的选项中。mixins选项接受混合对象的数组。

2.2.mixins的使用

一般有两个目的：

1.编写完构造函数后，需要添加临时活动中使用的方法。这时，混合将减少源代码的污染。

2.许多地方使用的常用方法。混合方法可以减少代码量，实现代码重用。

例如，以下示例：每次数据更改时，都可以在控制台上打印提示：“数据更改”

H1 mixins/h1hr div id=' app ' pnum : { { num } }/p pbutton @ click=' add '增加数量tto/p/div脚本类型=' text/JavaScript ' var addlog={//临时添加时，用于显示日志updated : function(){ console . log('数据更改为' this.num '));}} Vue.mixin({//全局注册一个混搭，这会影响注册后创建的每个Vue实例updated : function(){ console . log('我是全局混搭')}) var app=newvue ({el3360' # app '，data: { num: 1 }，methods 3360 { add : function(){ this . num；} }，updated() {console.log('我是本地更新')}，mixin :[addlog]//mixen in })

3.3.mixins的调用顺序

上面的例子表明，就执行顺序而言，混合对象的钩子将在组件本身的钩子之前被调用。如果遇到全局混合(Vue.mixin)，全局混合的执行顺序应该在混合方法和组件方法之前。

第三，延伸

1.扩展使用

extends选项允许声明扩展另一个组件，而不使用Vue.extend.通过向外部添加对象来扩展构造函数。这与混合mixin非常相似。只有收到的参数是简单的选项对象或构造函数，因此extends一次只能扩展一个组件。

h1 extends/h1hr div id=' app ' num 3360 { { num } } pbutton @ click=' add ' add/button/p/div script type=' text/JavaScript ' varbbb={ updated(){ console . log('我被扩展了')；}，methods : { add 3360 function(){//与原生方法冲突，所以取原生方法，和在console.log中混合一样('我是扩展add方法！');this.num} } };varapp=new vue({ El : ' # app }，data: {num33601}，methods : { add 3360 function(){ console . log('我是本机add method '))；this.num} }，已更新(){console.log('我是扩展的')；}，extends 3360 BBB//接收对象和功能})

从上面的例子可以看出，执行的顺序和mixins是一样的。此外，当扩展方法与原始方法冲突时，扩展方法不会生效，这与混合相同。

2.比较2.extends和mixins的优先级

var extend={ data : { extend data : '我是extend的数据' }，create d : function(){ console . log('这是extend的创建者')；} } varmixin={ data : { mixindata : '我是mixin的数据' }，create d : function(){ console . log('这是mixin创建的')；}} varvm=newvue ({el:' # app '，data: {mixindata: '我是vue实例的数据' })，create d : function(){ console . log('这是vue实例的创建者')；}，methods : { getSum 3360 FuncTion(){ console . log('这是vue实例中getsum的方法')；} }，mixin :[mixin]，extends 3360 extend })

可以得出结论，扩展触发器比混合触发器具有更高的优先级

第四，延伸

Vue.extend只是创建了一个构造函数，用来创建可重用的组件。它主要用于服务Vue组件和生成组件

div ID=' it any ' hello/hello my-world/my-world/div script/* * *模式1:首先创建一个组件构造函数，然后通过组件构造函数*///1创建一个组件。使用Vue.extend()创建一个组件构造函数var my component=vue . extend({ template : ' H3 hello world。//2.使用Vue.component(标签名，组件构造函数)根据组件构造函数创建组件vue.component ('hello '，my component)；/* * *模式2:直接创建组件(推荐)*///vue.component ('world '，{vue.component ('my-world '，{template:' H1Hello，World/h1 ' })；Var vm=new Vue({ //vm这里也是一个叫根组件rootel:' # it any '，data: {})的组件)；/script如果需要源代码，请戳源代码

参考文章

Vue官方文件

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。