详细聊聊Vue的混入和继承

2021-11-02

目录

前言
混入
混入注意(重名情况)
局部混入
全局混入
继承
混入和继承的区别
总结

前言 Vue中的混入(mixin)是一个比较简单的知识点。熟悉CSS预处理语言比如less、sass的开发者对mixin肯定很熟悉。Vue中的mixin几乎跟less等里面的mixin一样，都是将定义好的一些功能原样注入Vue组件当中，也有些类似面向对象编程中的继承(我只是说类似:) )。
mixin是一个对象，这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等，当全局混入或者混入到组件后，Vue实例或者组件实例就拥有了mixin中定义的生命周期钩子、属性等等。如果两者中有重复的，会按照一定的规则合并。

混入

将多个vue文件内重复使用的功能代码，提取成单个js文件，在需要使用的地方进行调用即可。
在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有中可以定义的代码。

混入注意(重名情况)

组件中的 data变量名和混入中的 data变量名, 发生重名时, 以组件为准;
组件中的 methods，computed，wath名称和混入中的 methods，computed，wath名称名, 发生重名时, 以组件为准;
组件中的生命钩子函数和混入中的生命钩子函数名, 发生重名时, 都会执行, 但是组件中的钩子函数优先执行 ;

局部混入

文章图片

全局混入定义及全局注册

文章图片

调用

文章图片

继承

注意：这里是不适合多继承的，多继承问题出现会多。
extends除了可以继承 .vue 文件，而且可以和 mixin一样使用 js文件内的对象。
extends继承 .vue 文件内的 template内的html是无法继承的

文章图片

混入和继承的区别

先看看官方文档的定义, 其实两个都可以理解为继承;
mixins接收对象数组（可理解为多继承）;
extends接收的是对象或函数（可理解为单继承）。
注意: 如果一个组件, 既使用继承, 又使用混入, 它们二者中如果有重名, 则混入会覆盖继承

文章图片

总结 【详细聊聊Vue的混入和继承】到此这篇关于Vue混入和继承的文章就介绍到这了,更多相关Vue混入和继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

上一篇：web项目开发VUE的混入与继承原理

下一篇：Java中BufferedReader与Scanner读入的区别详解