vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错，具有参考借鉴价值，需要的朋友可以参考下

说下我对vue中mixin的一点理解

　　vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：

父组件 + 子组件 >>> 父组件 + 子组件

mixins：

父组件 + 子组件 >>> new父组件

作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

下面给大家介绍vue mixin的用法，具体介绍如下所示：

定义一个 js 文件(mixin.js)

export default {
 data() {
  return {}
 },
 created() {},
 mounted() {},
 methods: {}
}

局部混入

在需要使用混入的文件中引入

<script>
//引入混入的文件
import mixin from "mixin文件路径"
export default {
    mixins:[mixin], //混入文件
    data() {
        return {}
    },
    
    methods: {}
};
</script>

全局混入

直接在main.js 文件中使用Vue.mixin方法

import Vue from 'vue';
import App from './App';

Vue.mixin({
  created() {
    console.log('全局混入的钩子函数');
  }
});

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

模块化注册，新建mixin.js文件并添加以下代码

然后在main.js中引入该文件并使用use方法进行注册

**mixin.js文件：**

export default {
  install(Vue) {
    Vue.mixin({
      created() {
        console.log('全局混入的钩子函数');
      }
    })
  }
}

**main.js文件：**

import Vue from 'vue';
import App from './App';
import myMixin from './mixin.js';

Vue.use(myMixin);

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

注意：

对于混入对象以及组件自身的钩子函数，它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。

var mixin = { created: function () { console.log('混入对象的钩子被调用') } } 


new Vue({ mixins: [mixin], created: function () { console.log('组件钩子被调用') } })

=> "混入对象的钩子被调用" // => "组件钩子被调用"

如果组件自身定义了与钩子对象中同名的数据或方法，为了避免冲突，vue将优先使用组件自身的数据或方法。

var mixin = { data() { return { message: 'hello', foo: 'abc' } } } 

new Vue({ 
    mixins: [mixin], 
    data() { 
        return { 
            message: 'goodbye',
            bar: 'def' 
        } 
    }
    })
  

=> { message: "goodbye", foo: "abc", bar: "def" } } })

将混入对象全局注册，在之后新建的所有vue组件中就都可以使用。

Vue 中mixin的用法详解 （uni-app使用vue的语法，也同样适用）