vue中mixins的使用方法

Vue Mixins 是一种允许在 Vue.js 中复用组件逻辑的方法。它可以为组件提供公共功能，从而减少组件之间的代码重复。

使用方法：

创建一个 Mixins 文件：在项目的某个地方创建一个 mixins 目录，并在该目录中创建一个 Mixins 文件。

定义 Mixins：在 Mixins 文件中定义 Mixins，比如说添加一个方法或者数据属性。

在组件中引入 Mixins：在需要使用该 Mixins 的组件文件中，通过 mixins 选项将该 Mixins 引入到组件中。

使用 Mixins：在组件中直接使用 Mixins 添加的方法或者数据属性即可。

例如：

// mixins/example.js
export default {
  data() {
    return {
      message: 'Hello from the Mixin'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  }
}

// component.vue
<template>
  <div>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
import exampleMixin from './mixins/example'

export default {
  mixins: [exampleMixin],
  data() {
    return {
      message: 'Hello from the Component'
    }
  }
}
</script>

在上面的例子中，组件 component.vue 引入了 mixins/example.js 中的 Mixins，并在组件内部覆盖了 Mixins 中的 message 属性。当点击“Say Hello”按钮时，将会输出“Hello from the Component”。