vue中 mixin用法

在Vue.js中，mixin是一种可以在多个组件之间共享Vue组件选项的灵活方式。mixin对象可以包含任何组件选项。当组件使用mixin时，所有mixin对象的选项将被“混合”到该组件的选项中。

使用mixin的一个主要优点是可以在多个组件之间重用和共享代码。这可以帮助减少代码冗余，并提高代码的可维护性。

下面是一个简单的mixin示例：

javascript
// 定义一个mixin对象  
const myMixin = {  
  created() {  
    console.log('mixin created');  
  },  
  methods: {  
    foo() {  
      console.log('mixin foo');  
    },  
    bar() {  
      console.log('mixin bar');  
    }  
  }  
};  
  
// 定义一个使用mixin的组件  
const MyComponent = {  
  mixins: [myMixin], // 使用mixin  
  created() {  
    console.log('component created');  
  },  
  methods: {  
    baz() {  
      console.log('component baz');  
    }  
  }  
};

在上面的示例中，MyComponent组件使用了myMixin mixin。当MyComponent组件创建时，它的created生命周期钩子会同时执行myMixin的created钩子。在methods选项中，MyComponent定义了一个名为baz的方法，而myMixin定义了foo和bar方法。这些方法可以在组件内部通过this.foo()和this.bar()来调用。

注意，如果组件和mixin定义了相同的方法或属性，组件的版本将优先级更高。这意味着在上面的示例中，如果myMixin和MyComponent都定义了created钩子，那么MyComponent的created钩子将优先执行。