理解VUE混入——mixin

最近又复习了下vue的混入，之前总觉得很神圣，现在又回过头来看了一下。话不多说，直接上代码：

创建mixin.js，内部代码如下：

const mixin = {
    data(){
        return {
            num: 10
        }
    },
    mounted(){},
    methods: {
        mixinFunc() {
            console.log(111)
        }
    }
}

export default mixin

下面就是引入，如果是全局引入，就需要在app.vue里进行如下操作，如果是单个页面引入，就在页面内单独引入即可

<script>
import mixin from "../mixin.js" //mixin.js的地址
export default{
    mixins: [mixin],
    mounted() {
        console.log(this.num);
        this.mixinFunc()
    }
}
</script>

这样，在页面里就可以直接用this调用mixin.js里的任意参数和方法啦；

总结及注意事项：

1、mixin里的钩子也是生效的，且在页面的钩子之前执行

2、如果mixin里和页面内存在相同的函数名称的函数，则会发生合并，生效的为页面内的函数；所以这就涉及到代码规范了，尽量区分，避免重复；

3、代码直接粘贴就可使用，喜欢记得收藏哦！