vue项目mixin.js的使用及注意详解

 

简单的介绍下mixin（混入）：

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

注意：

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

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

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

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

 

用法：

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

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

2. 在组建中引用mixin

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

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

结果如下图：

 

 

转：https://www.cnblogs.com/qlongbg/p/12176920.html