混入（mixin）

62 阅读 0 评论 41 点赞

我是靠谱客的博主怡然导师，最近开发中收集的这篇文章主要介绍混入（mixin），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

mixin主要是针对vue的js逻辑复用，所以它一般都是js文件。

混入的方式一：单页面引入混入

首先创建一个 mixin 文件夹，然后再在里面创建一个mixin.js文件
然后再创建混入对象：

let mixin = {
    data(){
        return{
            
        }
    },
    created() {
        
    },
    methods: {
        
    },
}

// 记住，最后一定要导出
export default mixin

在组件中使用混入：

import mixin from '../mixin/mixin.js'	// 首先引入这个混入对象
export default {
    mixins:[mixin],		// 然后注册你引入的这个混入对象
}

混入方式二、全局混入：

创建混入对象的方式还是和上面方法一样

在main.js中引入混入对象并全局注册

import mixin from './mixin/mixin'
Vue.mixin(mixin);

这里需要注意的是，在全局注册混入对象的时候是Vue.mixin(mixin);不是Vue.use(mixin);

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

问：那么就会有一个问题，那么如果组件内也定义了同样的钩子函数，同名方法，同名数据，该以谁的为准？是覆盖还是合并？

钩子函数会合并起来，都会执行。先执行mixins的钩子函数再执行组件的钩子函数。

data的同名数据，要分情况讨论：

如果是基本类型，会用组件的同名数据覆盖mixin的数据。

但是如果是对象，会递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

methods的方法也是一样，会用组件的方法覆盖mixin的同名方法。

除了上面这些选项，还有比如components（组件），和directives(指令)等也是一样的逻辑，同名的会覆盖，以组件的为优先。