vue混入(mixin)的详解

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

1.钩子函数

同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。

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

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"

2.数据对象合并

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        data: {
            msg: 'I am Mixins',
            msg1: 'I am Mixins msg1'
        },
        created() {
            console.log('我是组件中的变量：' + this.msg2)
        }
    }
    new Vue({
        mixins: [Mixins],
        el: '#app',
        data: {
            msg: 'I am #app',
            msg2: 'I am msg2'
        },
        created() {
            console.log(this.msg)
            console.log('我是混入对象中的变量：' + this.msg1)
        }
    })
    
    // 我是组件中的变量：I am msg2
    // I am #app
    // 我是混入对象中的变量：I am Mixins msg1
</script>

3.普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('Mixin')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('#app')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
    // #app
    // MixinTwo
</script>

4.局部混入

在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "hello"
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + ',这是mixin混入方法')
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
    <div>{
   
   {msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
        }
    }
    mounted() {
        this.mixinMethod()
    }
}

// hello，这是mixin混入的方法

5.全局混入

在main.js加入以下代码

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
    <div>{
   
   {msg}}</div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
    mounted() {
        this.mixinMethod()
    }
}

// hello，这是mixin混入的方法
</script>

五、与vuex的区别

　　很多同学可能看到这里会有一些疑问，这不就跟Vuex差不多嘛，其实不是的：

　　mixin混入对象和Vuex的区别：

1、Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

2、mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

3、mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

4、mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；

六、与父子组件的区别

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

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

　　单纯组件引用：父组件 + 子组件 >>> 父组件 + 子组件

　　mixins：父组件 + mixin组件 >>> new父组件

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

vue混入(mixin)的详解

五、与vuex的区别

猜你喜欢