vue中混入mixin,vue的mixin用法
如果在每个组件中重复定义这些属性和方法，会导致项目中代码冗余，增加维护难度。针对这种情况，官方提供了Mixins功能，使用Vue mixins大有裨益。以下是Vue mixins的使用方法。请有需要的朋友参考。
目录
前言
1.什么是混合蛋白？
第二，什么时候用Mixins？
三、如何创建Mixins？
四。如何使用Mixins？
动词（verb的缩写）混合蛋白的特性
不及物动词Mixins合并冲突
七。与vuex的区别
八。与普通部件的区别
前言
随着我们的项目越做越大，我们会发现组件之间可能会有很多类似的功能。您复制并粘贴相同的代码段(数据、方法、观察、安装等。)一遍又一遍。如果在每个组件中重复定义这些属性和方法，会造成项目的冗余，提高维护难度。针对这种情况，官方提供了Mixins功能。
一、什么是Mixins？
Mixins (mixed in)，官方描述是一种非常灵活的在Vue组件中分发可重用功能的方式。mixins是一个js对象，它可以包含我们组件中脚本项中的任何函数选项，如数据、组件、方法、创建、计算等。只要我们把共享的功能以对象的形式传入mixins选项中，当一个组件使用mixins对象时，mixins对象的所有选项都会混合到组件本身的选项中，从而提高代码的可重用性，让你的代码保持干净，易于维护。
二、什么时候使用Mixins？
当我们在多个组件中有数据或类似的功能时，我们可以使用mixins来提取公共部分。通过mixins封装的函数，用组件调用它们不会改变函数作用域之外的内容。
三、如何创建Mixins？
在src目录下创建一个mixins文件夹，在文件夹下新建一个myMixins.js文件。我们前面说过mixins是一个js对象，所以我们应该以对象的形式定义myMixins。在对象中，我们可以像vue组件一样定义我们的数据、组件、方法、已创建、已计算和其他属性，并通过export导出对象。
四、如何使用Mixins？
在要调用的组件中引入myMixins.js文件，然后在导出默认中引入需要的对象。
五、Mixins的特点
[5.1]组件之间不共享方法和参数。虽然一个组件调用mixins并将其属性合并到自己的组件中，但是它的属性只会被当前组件识别，不会被共享，即其他组件无法从当前组件获取mixins中的数据和方法。
首先，我们在混合对象myMixins.js中定义一个年龄字段和一个getAge方法
导出常量myMixins={
组件：{}，
data() {
返回{
年龄：18，
}
},
已安装(){
this.getAge()
},
方法：{
getAge() {
console.log(this.age)
}
}
}
1对组件1中的num的操作
从“@/mixins/myMixins.js”导入{ myMixins }；
导出默认值{
mixins: [myMixins]，
data() {
返回{}
},
已创建(){
这个时代
},
}
部件2不工作。
导出默认值{
mixins: [myMixins]，
data() {
返回{}
},
}
我们分别切换到两个页面来查看控制台输出。会发现分量1改变了age中的值，分量2中age的值仍然是混合对象的初始值，不随分量1的增加而改变。
【5.2】引入mixins后，组件会将它们合并，mixins中的数据和方法会扩展到当前的组件中。在合并的过程中，会有冲突。接下来，让我们学习更多关于Mixins合并冲突的知识。
六、Mixins合并冲突
[6.1]具有对象值(组件、方法、计算、数据)的选项在混合到组件中时将被合并，当关键字冲突时组件将优先，组件中的关键字将覆盖混合的对象。
我们给混合对象添加age属性，getAge1方法，getAge2方法。
//myMixins.js
导出常量myMixins={
组件：{}，
data() {
返回{
年龄：18，
}
},
方法：{
getAge1() {
console.log(age1 from mixins=，this.age)
},
getAge2() {
console.log(age2 from mixins=，this.age)
},
}
}
我们给引入了myMixins文件的组件添加age属性、getAge1方法和getAge3方法。
//template.vue
从“@/mixins/myMixins.js”导入{ myMixins }；
导出默认值{
mixins: [myMixins]，
data() {
返回{
年龄：20，
}
},
已安装(){
this . getage 1()；
this . getage 2()；
this . getage 3()；
},
方法：{
getAge1() {
console.log(age1 from template=，this.age)
},
getAge3() {
console.log(age3 from template=，this.age)
},
}
}
我们会发现组件的年龄覆盖了混合对象的年龄，组件的getAge1方法覆盖了混合对象的getAge1方法。
[6.2]带有函数值的选项(created，mounted)在与组件混合时会被合并调用，混合对象中的钩子函数会在组件中的钩子函数之前被调用。
七、与vuex的区别
Vuex:用于状态管理，其中定义的变量可以在每个组件中使用和修改。在任何组件中修改该变量的值后，该变量在其他组件中的值也会被修改。
Mixins:可以在每个组件中定义和使用公共变量。引入组件后，变量之间相互独立，值的修改在组件中不会相互影响。
八、与公共组件的区别
组件：在父组件中引入一个组件，相当于在父组件中给出一个独立的空间给子组件使用，然后根据道具传递值，但本质上两者是相对独立的。
Mixins:是引入后与组件中的对象和方法合并，相当于扩展了父组件的对象和方法，可以理解为形成一个新的组件。
关于Vue对mixins用法的详细解释，本文到此结束。关于Vue mixins的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。