一.什么是Mixin(混入)

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

二.为什么要使用混入

1.1 Mixin的优点

混入可以减少程序中重复的功能，增强函数的复用性.当一个应用程序可能需要在各种对象中共享行为时，我们可以通过Mixin中维持这种共享功能并专注于程序中真正不同的功能，轻松避免任何重复，使项目结构更加清晰更加易于维护。

2.1 Mixin的缺点

Mixin是一种很灵活的代码复用方式，但把功能属性和方法导入，如果文件过多，会导致属性方法来源方面的不确定性，在大型系统中需要对项目文件的划分以及整体的掌控。

三.Mixins的特点

方法和参数在各组件中不共享
数据对象
mixin的数据对象和组件的数据发生冲突时以组件数据优先。
值为对象的选项
如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法

四.Vue Mixins 应用

定义公共的mixins文件：如mixin.vue


<template></template><script>export default {name: 'mixins-test-main',components: {},props: {},data () {return {mixinData: 'mixin中的变量'}},methods: {mixinFunction () {return '我是mixins里面的公共方法'},},mounted () {},computed: {}}
</script><style scoped>
</style>

在你页面内调用：需要import这个mixins文件，然后通过mixins:[‘文件名’]来使用

<template><div><div @click="handleMixin">调用mixin方法</div></div>
</template><script>import MixinItem from './mixin'export default {name: 'mixin-test-comp',props: {},mixins: [MixinItem],components: {},data () {return {}},methods: {handleMixin () {console.log('mixin-data=========', this.mixinData)let mixfun = this.mixinFunction()console.log('mixin-fun====>>>', mixfun)},},mounted () {},computed: {}}
</script><style scoped>
</style>

注意点:混入的方法会覆盖掉之前页面内部的同名属性或方法。

五.小程序Mixins应用

小程序的Page并没有给出混入的API以及解方案，如果想要实现混入，需要自己封装Mixins方法，来实现对象方法以及属性的混入，达到代码的复用的目的。

1.1 Mixins 使用

在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，封装为一个 mixin 文件：

module.exports = {data:{two:"我是Mixin里面的数据"},b(){console.log("我是b函数",this.data.one)}
}

导入 @/mixins/tabbar-badge.js 模块并进行使用

import mixin1 from "../../mixins/public/mixin1.js";
Page({mixins:[mixin1],data:{one:"我是index里面的数据"},a(){console.log("我是a函数",this.data.two)},onLoad(){this.a();this.b();}
})

六.如果发生命名冲突该怎么办？

当mixin中的数据、方法或任何组件选项与组件中的选项具有相同的名称时，可能会发生组件与其mixin之间的命名冲突。如果发生这种情况，则组件本身的属性将优先。
示例代码如下:

// mixin.js
export default {data () {title: ‘Mixin’}
}// main.js file
import mixin from ‘./mixin.js’
export default {mixins: [mixin],data () {title: ‘Component’},created: function () {console.log(this.title)   // "Component"}
}

七.与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

八.与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

总结:对于Vue 的 mixin，我们还有很多要了解,但是上面这些知识在开发中一般足够用了,混合对于封装一小段想要复用的代码来讲是有用的,混合不需要传递状态，但是这种模式当然也可能会被滥用。所以我们还是需要仔细斟酌使用。

Vue Mixin 与小程序 Mixins 应用相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
[vue] vue和微信小程序写法上有什么区别？
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下 ...
微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
vue和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
Vue开发微信小程序
一.安装Vue及Vue-cli脚手架参考:Windows安装Vue 二.安装HBuilder X[方便快速上手] 1.下载 2.解压[无需安装] 3.点击执行[根据需要创建桌面快捷方式即可] 4.创 ...
Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
vue 和微信小程序的区别
点击上方关注 "终端研发部" 设为"星标",和你一起掌握更多数据库知识作者: 卖女孩的小火柴来源: segmentfault.com/a/119000001 ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)

Vue Mixin 与小程序 Mixins 应用