vue2 mixins混入

在Vue2中，使用mixins混入有两种方式：

1. 全局混入：在Vue实例初始化之前，使用Vue.mixin()方法进行全局混入。具体步骤如下：

   • 在main.js（或其他入口文件）中引入Vue和混入对象：

     import Vue from 'vue'
     import App from './App.vue'
     import MyMixin from './mixins/MyMixin'
     
     Vue.mixin(MyMixin)
     
     new Vue({
       render: h => h(App)
     }).$mount('#app')
     

   • 创建一个名为MyMixin的混入对象：

     // mixins/MyMixin.js
     export default {
       mounted() {
         console.log('Mixin mounted')
       },
       methods: {
         hello() {
           console.log('Hello from mixin')
         }
       }
     }
     

   • 在组件中使用混入对象的方法：

     // components/MyComponent.vue
     export default {
       mounted() {
         console.log('Component mounted')
         this.hello() // 使用混入对象的方法
       }
     }
     

2. 局部混入：在组件选项中，使用mixins属性进行局部混入。具体步骤如下：

   • 创建一个名为MyMixin的混入对象：

     // mixins/MyMixin.js
     export default {
       mounted() {
         console.log('Mixin mounted')
       },
       methods: {
         hello() {
           console.log('Hello from mixin')
         }
       }
     }
     

   • 在组件中使用混入对象的方法：

     // components/MyComponent.vue
     import MyMixin from '../mixins/MyMixin'
     
     export default {
       mixins: [MyMixin], // 使用混入对象
     
       mounted() {
         console.log('Component mounted')
         this.hello() // 使用混入对象的方法
       }
     }