Vue.js基础-13-混入对象（应用示例，同名函数优先级，选项合并，选项优先级，全局混入，Vue.mixin）

1. 混入对象

1.1 简单应用

语法示例

• 定义混入对象

      var 混入对象名 = {
        created: 操作
      };

• 组件中引用混入对象

      new Vue({
        component: {
          mixins: [混用对象名],
        }

完整示例

1.2 定义一个组件引用混入对象

语法示例

• 定义混入对象

      var 混入对象名 = {
        created: 操作
      };

• 定义一个组件来扩展vue实例

      var 组件名 = Vue.extend({
        mixins: [myMixin],
      });

• 初始化组件实例

new 组件名();

完整示例

2.3 混入对象使用函数

示例（在混入对象中直接定义函数）

将上例替换如下：

      var myMixin = {
        created: function () {
          document.write("混入实例");
        },
      };

示例（混入对象引用methods中函数）

2. 同名函数优先级（vue实例 VS 混入对象）

2.1 选项合并（实例下直接选项）

说明

Vue 实例与混入对象包含了相同的方法。两个函数将合并，并且一起输出。

完整示例

• 结果输出

混入调用
组件调用

2.2 选项优先级（实例下methods的选项）

说明

Vue实例和混入对象实例中的methods下有同名函数，则Vue实中的methods下的同名函数优先级高

完整示例

说明：

• 混入对象：methods中包含两个方法，一个无同名的（mixinfunction），一个和vue实例中同名的（samemethod）。
• vue实例：methods包含两个方法，一个无同名的（vmfunction），一个和混入对象中同名的（samemethod）。

按预期，mixinfunction、vmfunction和vue实例中的 samemethod 将被打印出来

• 代码

• 结果显示

混入对象中的方法
Vue实例中的方法
Vue中同名方法

3. 全局混入

• 完整代码

• 结果显示

HELLO !

---

image.png