Vue 组件功能的复用

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 = false
 
new Vue({
    render: h => h(App),
}).$mount('#app')