关于 vue 中 minins 的使用

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。

今天看到一个招聘信息中有写到会minins的使用，之前学vue的时候也有用到过，但是到现在我对minins的印象居然是和组件差不多，那么现在就重新学习minins，看看它的作用究竟是什么

mixins (混入) 是一种分发Vue组件中可复用功能的非常灵活的一种方式，在复用代码这个角度来看，和组件是差不多的。

混入文件通常也会像组件文件一样，专门放在一个文件夹（mixins）内

创建一个vue对象变量，在这里不用 new ，我们给一个num设置为0， 一个方法add改变num的值， 和一个简单的输出语句函数fun

使用 export default 输出出去（相当于提供一个接口给外界，让其他文件通过 import 来引入使用）

let myMixin = {
    data () {
        return{
            num: 0
        } 
    },
    created () {
        console.log("混入对象的钩子函数");
    },
    methods: {
        add(val){
            this.num += val ;
        },
        fun(){
            console.log("这是一个 fun 函数");
        }
    }
}
export default myMixin

在 js 中引用mixins文件，就可以直接引用文件中的内容了

import  addMixin  from "../mixins/addMixin";

export default {
  mixins: [addMixin],
};

这里单击增加按钮，可以触发混入文件中的add方法，并进行+1操作

<div>{{num}}</div> 
<button @click="add(1)"> 增加</button>

我们也可以通过钩子函数触发混入文件的其他方法

created () {
    console.log("原文件的钩子函数");
    this.fun()
},

并且混合对象里的钩子函数会在组件里的钩子函数之前调用

我们在文件中自己定义一个num=5，混合对象num=0 引用的时候 num显示为5，是会优先原本文件的数据的

mixins与组件的区别， 引用组件是通过传值给组件或者直接引用将组件放到我们的页面中进行显示，父子组件中传值都是比较麻烦的，他们直接也是相互独立的。但是mixins则像是把混入变成了自己的一部分，只不过写在了其他地方。