vue中Mixins

使用 Mixins 的主要优点包括：

1. 代码复用: 可以将常用的逻辑封装在 Mixin 中，然后在多个组件中重复使用。
2. 逻辑分离: 将不同功能的代码分开管理，使代码更加清晰和易于维护。
3. 灵活性: Mixins 允许你在组件中引入多个 Mixin，并且可以根据需要覆盖或修改 Mixin 中的选项。

什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的

 

创建Mixins

                            方法一                                                        方法二

如何使用Mixins？

                               方法一                                                        方法二

 例：创建->mixins文件夹->module.js

export default {data() {return {num: 10,dataList: [],}},methods: {datalist() {this.dataList = [{ name: "小红", age: 18 },{ name: "小li", age: 28 },{ name: "小红2", age: 38 },]},addhandle() {this.num++;console.log(this.num, "我是mixins混入的方法");}},}

使用->在任意页面中使用：

<el-button @click="addhandle">mixin混入的方法</el-button>
import mixinModule from '@/mixins/module.js'
export default {mixins: [mixinModule],mounted() {console.log(this.dataList, 'mixins混入的数据')}
}