vue中混入（mixin）的使用

简介：

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

---

注意：

1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式在Vue.extend() 里最终选择使用相同的选项合并逻辑合并，并在发生冲突时以组件数据优先。

2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

3. 在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的

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

---

vue例：

基础
// 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定义一个使用混入对象的组件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!"
选项合并
（当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生 冲突时以组件数据优先。）
var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } })
Vue 官方详细链接

---

用法：

1. 在utils文件夹下定义mixin.js，记住他可以拥有vue实例的各种属性和方法

export default {
    data () {
        return {
            initData: 'mixin初始数据'
        }
    },
    mounted () {
        console.log('minxin的挂载输出')
    },
    methods: {
        doubleNum(num){
            return num*2+'mixin中的数据'
        }
    }
}

2. 在组件中引用mixin.js

<template>
    <div>
        <h1>{{ name }}</h1>
        <h2>{{ initData }}</h2>
        <h3>{{ num }}</h3>
        <h4>{{ mixinNum }}</h4>
    </div>
</template>

<script>
import mixinss from '../utils/mixin';
export default {
    mixins: [mixinss],
    data () {
        return {
            name: '混入组件',
            num: 10,
            // initData: '组件初始数据',
            mixinNum: this.doubleNum(10) //调用mixin.js文件中的doubleNum方法
        }
    },
    mounted () {
        console.log("当前组件的挂载输出");
    },
}
</script>

结果：

---

html页面从上至下依次展示为：
混入组件
mixin初始数据
10
20mixin中的数据
组件中的打印值为 ：
minxin的挂载输出
当前组件的挂载输出

---

• 在main.js文件中全局引入如下

import Vue from "vue"
import Mixmins from "./utils/mixin"
Vue.mixin(Mixmins)