Vue mixins混入

Vue mixins 混入

1、mixins 含义

mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改，mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式。
一个混入对象可以包含任意组件选项。比如组件的生命周期，data() { return{} }，methods 方法等，凡事能在组件上编写的都能在 mixins 中定义。

2、什么时候使用Mixins

页面的风格样式不同，但是执行的方法和需要的数据类似，这时候我们就可以把公共的方法提出来，然后在混入需要用到的组件里面，直接调用。相同的方法写一遍即可。

3、示例

在 src/components/mixin 文件夹下创建对应的 common.js 文件

export const test1 ={
  data: () => ({
  }),
  mounted(){
  },
  methods: {
  }
}

export const test2 ={
  data: () => ({
  }),
}

在组件中引入这个 mixins 对象，通过 mixins:[xxx]，使用 mixins 对象可以混入多个 mixins 对象

import { test1.test2 } from "../components/mixin/common"
export default {
  name: 'main',
  //混入跟组件有同一个生命周期，混入对象会比组件的先执行
  mixins:[test1,test2], //混入的对象中谁在前面就先调用谁，如audioUrl=>test1=>test2
  data: () => ({
  }),
}

引入 mixins 之后，即可以像调用 data 那样调用混入的方法或变量

vue mixins混入的使用_wjswangjinsheng的博客-CSDN博客