Vue 2.x 混入 mixins

[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);
```

Vue 2.x 混入 mixins

最新发布

友情链接