vue2知识点：混入mixins

@[toc]

3.18混入

<font color='red'>注意点1：</font>所谓“混入”，就是把vue组件中共同的配置提取出来，单独用一个文件保存，比如叫mixin.js保存配置，使用时引入并配置即可使用。

<font color='red'>注意点2：</font>

问题：如何使用混入？

<font color='red'>答案：</font>第一步引入，第二步配置mixins。

mixin.js

export const hunhe = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('你好啊！')
    },
}
export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

组件内使用时引入并配置

import {hunhe,hunhe2} from '../mixin'

export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
                x:666
            }
        },
        mixins:[hunhe,hunhe2],
    }

<font color='red'>注意点3：</font>mixin.js中写法export const hunhe = {}，这叫ES模块化的分别暴露。

<font color='red'>注意点4：</font>组件中使用混入，需指定mixins:[]，必须为数组才有效。

<font color='red'>注意点5：</font>所有的vue的配置项都可以写在“混入”里面。

<font color='red'>注意点6：</font>混入文件mixin.js中有一个属性名，而data中未定义相同的属性名，那么值<font color='red'>以“混入”中定义的为主</font>，如果mixin.js中和data中有相同属性名，那么<font color='red'>以data中配置的数据或方法为主</font>，说白了“混入”不破坏你的代码。

<font color='red'>注意点7(特殊情况)：</font>

问题：和注意点6对比，比如“混入”中定义了钩子函数，而data中定义了相同名称的钩子函数，那么以谁为主？

<font color='red'>答案：</font>钩子函数会特殊处理，vue不以任何人为主，vue它都要，另外<font color='red'>注意加载顺序</font>，“混入”中钩子函数先加载，组件中同名钩子函数后加载。

<font color='red'>注意点8：</font>混入有局部混入，还有全局混入

“局部混入”方式，使用mixins:[]

组件中
<script>
    //引入一个hunhe
    import {hunhe,hunhe2} from '../mixin'

    export default {
        name:'School',
        data() {
            return {
                ...
            }
        },
        mixins:[hunhe,hunhe2],
    }

“全局混入”方式，使用Vue.mixin()，注意弊端：Vue.mixin(hunhe)会导致所有的vm、vc都拥有“混入”配置

main.js中

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

<font color='red'>注意点9：</font>使用“混入”步骤还是3步：

• 1）定义，提取成mixin.js文件，放在跟A匹配。App.vue同级别下
• 2）注册，分局部）注册和全局）注册
• 3）main.js中引入

本人其他相关文章链接

1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结