以下是vue官网对mixin的介绍:
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
选项合并:当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
刚开始看的时候,我感觉这个东东和组件好像没有什么区别.然鹅,看了这篇文章后发现我还是太年轻了.下面我们来看看mixins和普通情况下引入组件有什么区别
- 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
父组件 + 子组件 >>> 父组件 + 子组件 - 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
父组件 + 子组件 >>> new父组件
我自己想了下mixin的使用场景:
- 不同的页面需要使用相同的数据
- 不同的页面可以使用相同的方法
- 其他
以下是我自己写的一个小栗子:
<!--page-a.vue-->
<template>
<div class="padd50">
<div>page-a</div>
<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
<el-button @click="commit">提交</el-button>
</div>
</template>
<script>
import mixin from './mixin'
export default {
name: "page-a",
mixins: [ mixin ],
data() {
return {
time: '',
name: '明妃',
}
},
created() {
console.log('page-a 父组件created钩子后执行')
console.log(this.name)
console.log(this.exmap)
},
mounted() {
console.log('page-a 父组件mounted钩子后执行')
}
}
</script>
<!--page-b.vue-->
<template>
<div class="padd50">
<div>page-b</div>
<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
<el-button @click="commit">提交</el-button>
</div>
</template>
<script>
import mixin from "./mixin";
export default {
name: "page-b",
mixins: [ mixin ],
data() {
return {
time: ''
}
},
created() {
console.log('page-b 父组件钩子后执行')
}
}
</script>
// mixin.js
const mixin = {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
},
name: '废柴',
exmap: 'mixin特有,可以在父组件直接使用',
}
},
methods: {
commit() {
console.log("mnxin方法被提交")
}
},
created() {
console.log('mixin created钩子先执行')
},
mounted() {
console.log('mixin mounted钩子先执行')
}
}
export default mixin
访问page-a页面,输出如下:
mixin钩子先执行
page-a 父组件钩子后执行
明妃
mixin特有,可以在父组件直接使用
mixin mounted钩子先执行
page-a 父组件mounted钩子后执行
可以看到,如下:
- mixin钩子和父组件钩子会合并,都会执行
- mixin钩子先于父组件钩子执行
- 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
