分析网易严选网站开发网站栏目描述

可以把多个组件中共有的配置提取出来构成一个混入。

一、配置混入

（一） 创建mixin.js

这里的名字可以自定义，但是为了方便识别，多数场景下都写mixin。

mixin.js 要创建在src目录下，与main.js平级：

（二）配置混入信息

写法和Vue中的配置项的写法一致：

这里配置了两个混入，一个是输出组件中的name属性，一个是往组件中添加x和y属性。

注意：组件需要暴露出去才能被引入

二、引入混入

（一）局部混入

局部混入就是在哪个组件中引用就只能在哪个组件中使用。

使用混入前需要先对混入进行引入，然后再配置mixins：

mixins:[ 混入对象1, 混入对象2 ]

（二）全局混入 

在main.js 文件中配置全局混入，引入混入后配置混入：

Vue.mixin( 混入对象 );

配置完成后所有的组件都会拥有x和y属性：

三、混入和组件数据中的优先级 

1. 如果是data 和methods 等属性冲突，以组件中的数据为主。

2. 如果组件和混入中都配置了生命周期函数，那么组件和混入中的生命周期函数都会执行。

3. 混入中的生命周期函数优先执行，组件中的生命周期函数再执行。