vue组件的继承,vue组件继承并重写方法

　　本文主要介绍Vue的混合继承，有需要的朋友可以借鉴一下，希望能有所帮助，希望能给你带来帮助。

混合继承实现的效果：

　　具有数据属性和say方法。

　　b有一个see方法和一个name属性。

　　A继承B后，A不仅拥有自己的数据属性和say方法，还拥有B的see方法和name属性。

　　在C中混合了AB之后，C有了自己的thing和A的一个数据属性，还有一个say方法，还有一个see方法和b的一个name属性。

一、继承

Vue.extend方法

　　Vue.extend( Vue ComponentOptions)是一个全局方法。使用基本的Vue构造函数创建一个“子类”。参数是包含组件选项(Vue ComponentOptions)的对象。

　　data属性是一个特例，需要注意——它必须是Vue.extend()中的函数(工厂函数)

　　//创建构造函数ja

　　var Profile=Vue.extend({

　　模板： p { {名字}} { {姓氏} }又名{ {别名}}/p ，

　　数据：函数(){

　　返回{

　　名字：“沃尔特”，

　　姓氏：“白色”，

　　别名：“海森堡”

　　}

　　})

　　//创建Profile类的实例，并将其安装在元素上。

　　新建个人资料()。$ mount(# mount-point)

extends 属性

　　Extends** **允许声明在不使用Vue的情况下扩展另一个组件(可以是简单的option对象或构造函数)，extend这主要是为了方便单文件组件的扩展。类型是对象或函数。

　　pageTwo.vue文件

　　模板

　　差异

　　h3第二页/h3

　　分页：total= total :pageSize= pageSize :size options= size options /

　　/div

　　/模板

　　脚本

　　从导入分页数据./component/PagingData.vue

　　导出默认值{

　　//实现继承

　　扩展：分页数据

　　}

　　/脚本

　　注意：上述文件的分页是一个全局注册的自定义组件，PagingData也是一个组件，但其内容是通过继承而不是注册合并到pageTwo中的。

二、混合（mixins）

　　混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项都将“混合”到组件本身的选项中。

合并规则

　　当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

　　1.数据对象将在内部递归合并，如果发生冲突，组件数据将优先。

　　2.同名的Hook函数(生命周期函数)会合并成一个数组，所以都会被调用。另外，与对象混合的钩子会在组件本身的钩子之前被调用。

　　3.值为对象的选项，如方法、组件和指令，将被合并到同一个对象中。当两个对象的键名冲突时，采用组件对象的键值对。

　　继承(extends )也是这个合并的规则

　　你可以用混合来实现多重继承，但是混合不是用来实现继承的。多个Vue组件选项(Vue可选组件对象)被合并。

　　形式:Mixins:[合并组件1，合并组件2，…]

　　pageOne.vue文件

　　模板

　　差异

　　h3第一页/h3

　　人力资源/

　　paging @ pageChangeEvt= CB :total= total :pageSize= pageSize :size options= size options /

　　/div

　　/模板

　　脚本

　　从导入分页数据./component/PagingData.vue

　　从导入分页功能./component/PagingFunc

　　导出默认值{

　　//扩展：{PagingFunc，PagingData}，

　　//扩展：[PagingFunc，PagingData]，

　　mixins: [PagingFunc，PagingData]，

　　}

　　/脚本

　　注意：上述文件的分页是一个全局注册的自定义组件。PagingData和PagingFunc也是组件，但没有注册，只是通过混合将内容合并到pageOne中。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。