混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
<template>
<div class="template1">
组件1
</div>
</template>
<script>
export default { mixins:[myMixin] } </script>
export const myMixin = { data(){ return { num: 1 } }, created(){ this.hello() }, methods:{ hello(){ console.log("hello from mixin") } } }
<template>
<div class="app-container">
<div class="template1">
template1里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
created(){
this.num++
}
}
</script>
<style scoped>
.template1{
font-size:28px;
color:red;
}
</style>
<template>
<div class="app-container">
<div class="template2">
template2里面的num：{{num}}
</div>
</div>
</template>
<script>
import { myMixin } from "./mixins/index.js";
export default {
mixins:[myMixin],
}
</script>
<style scoped>
.template2{
font-size:28px;
color:blue;
}
</style>
组件1：组件1里面处理了num参数，num参数变成处理后的值
组件2：组件2没有处理num参数，组件2里面的num参数还是mixins里面的值，没有发生任何改变
vue中mixins的使用方法和注意点---mixins第一篇
原文：https://www.cnblogs.com/pwindy/p/14761039.html