vue中的mixins如何使用

Vue.js 中的 Mixins 是一种将共享的功能或属性从一个组件抽取到另一个组件的方式，这使得代码更模块化、易于复用。在 Vue 中，Mixins 通过 `extend` 或者 `mixin` 函数来实现：

1. 使用 extend 的方式：

// 定义一个 mixin 对象
const sharedBehavior = {
  methods: {
    sayHello() {
      console.log('Hello from Mixin');
    }
  },
  data() {
    return {
      name: 'Mixin'
    };
  }
};

// 在组件中使用 mixins
export default {
  extends: Vue.component,
  mixins: [sharedBehavior],
  // 其他组件选项...
};

2. 使用 mixin 函数：

// 创建 mixin
function reusableMethods() {
  this.methods = {
    sayHello() {
      console.log('Hello from Mixin');
    }
  };
}

// 应用 mixin 到组件上
export default {
  created() {
    reusableMethods.call(this);
  },
  data() {
    return {
      name: 'Component'
    };
  }
};