Vue中的混入（Mixins）是一种复用组件逻辑的技术，它允许你抽取组件中的可复用功能，并将其作为一个独立的模块与其他组件组合。混入对象可以包含数据、计算属性、方法、生命周期钩子、侦听器等组件选项。当组件使用混入时，混入对象的选项会被“混合”到该组件自身的选项中。
// mixin.js
export const myMixin = {data() {return {mixinData: '来自混入的数据'}},methods: {mixinMethod() {console.log('这是一个混入的方法');}}
}应用混入：在组件中，通过mixins选项使用混入
// MyComponent.vue
<template><div><h1>{{ mixinData }}</h1><button @click="mixinMethod">点击调用混入方法</button></div>
</template><script>
import { myMixin } from './mixin';export default {mixins: [myMixin], // 应用混入data() {return {componentData: '组件自身的数据'}},methods: {componentMethod() {console.log('组件自身的方法');}}
}
</script>全局混入：Vue也支持全局混入，通过Vue.mixin(myMixin)注册，会影响所有之后创建的Vue实例。但应谨慎使用，以免污染全局命名空间
import Vue from 'vue'
import App from './App.vue'//导入
import { mymixins} from './mixins'//使用
Vue.mixin(mymixins)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
