mixin机制 vue_Vue 中mixin混入机制

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项中。

简单的说，组件在引用之后就相当于在父组件内开辟了一块单独的空间，然后根据父组件props过来的值进行相应的操作。而使用mixins机制的组件则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并，然后再执行渲染。即

单纯组件引用

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

mixins组件

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

同时，使用mixins机制的组件，多个组件之间可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。如果项目中有使用vue-router，那么组件将自动使用mixins机制。

下面是mixin的一个使用示例： 1，定义一个 js 文件(mixin.js)：

export default {

data() {

return {

name: 'mixin'

}

},

created() {

console.log('mixin...', this.name);

},

mounted() {},

methods: {}

}

2，然后在vue文件中使用mixin。

import '@/mixin'; // 引入mixin文件

export default {

mixins: [mixin]

}