Mixin 混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
怎么理解呢，就是每一个组件都会有一些选项 data、computed、methods ...对吧，假设我有 10 个组件，每一个组件内都有一个相同的 methods 方法，那我就将这个可复用的方法抽离到 mixin 文件中，然后在引入进来。这样我就不需要每个组件都编写重复的 methods 方法了，data、mounted 等等的选项也是如此。
基础案例
hello-world.vue
vue
<template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {}
}
}
</script><template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {}
}
}
</script>mixin.js
javascript
export default {
data() {
return {
name: 'xiaoming'
}
}
}export default {
data() {
return {
name: 'xiaoming'
}
}
}预览效果
选项合并
因为混入会把它本身的选项和组件的选项一起合并，那么也就是说会发生一些冲突，例如混入中的文件含有 name 属性，而组件的选项 data 中也存在 name 属性，那页面渲染的时候会以哪个为准呢？接下来进行测试一下。
hello-world.vue
vue
<template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {
name: 'libai'
}
}
}
</script><template>
<div class="home">
{{ name }}
</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data() {
return {
name: 'libai'
}
}
}
</script>mixin.js
javascript
export default {
data() {
return {
name: 'xiaoming'
}
}
}export default {
data() {
return {
name: 'xiaoming'
}
}
}预览效果
可以看出来是以组件选项的为准，这里只举例了选项 data 的冲突，其他选项 methods、computed、mounted 也是如此，小伙伴们可以自行去测试一下。在开发的时候需要多留意一下冲突的情况。