[TOC] #### 1. 混入概述 --- 混入 (minxin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项 ```javascript // 定义一个混入对象 const myMixin = { data() { return { name: "liang", }; }, methods: { sayHello() { console.log("hello !"); }, }, }; // 定义一个使用混入对象的组件 export default { mixins: [myMixin], data() { return {} } } ``` #### 2. 选项合并 --- 当组件和混入对象含有同名选项时，这些选项将 **以恰当的方式进行合并** 数据对象 (data 选项) 在内部会进行递归合并，同名时以组件数据优先，示例如下所示： 如果混入 myMixin, myMixin2 两个对象，数据对象同名时优先级为：**组件数据 > myMixin2 数据 > myMixin 数据** ``` mixins: [myMixin, myMixin2] ``` 同名钩子函数将合并为一个数组，都会被调用。混入对象的钩子将在组件自身钩子之前调用。 ```javascript const mixin = { created() { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], created() { console.log('组件钩子被调用') } }) // => "混入对象的钩子被调用" // => "组件钩子被调用" ``` 对于值为对象的选项，如：methods、components、directives，将合并为一个对象，键名同名时取组件对象的键值对 ```javascript const mixin = { methods: { foo() { console.log("混入对象的方法"); }, }, }; new Vue({ mixins: [mixin], methods: { foo() { console.log("组件的方法"); }, }, }); vm.foo() // => "组件的方法" ``` #### 3. 全局混入 --- [uView 小程序分享](https://www.uviewui.com/js/mpShare.html) 利用全局混入实现全局分享 混入也可以进行全局注册，使用时一定要格外小心 ！一旦使用全局混入，将影响每一个之后创建的 Vue 实例 ```javascript const mixin = { methods: { foo() { console.log("混入对象的方法"); }, }, }; Vue.mixin(mixin); ```