vue系列_混入（mixin）

逃离我推掉我的手 2021-11-19 14:14 385阅读 0赞

一、混入的理解：

1、混入（mixin）就是一个vue对象，你可以认为，混入是把每个vue组件的公共部分的内容抽取出来了。即提高了代码的复用性。

2、假设每个vue组件里的都有同样的函数testf，而且完成的功能是一模一样的，怎么办，不能像原生js那样单独封装个函数吧，肯定不行，那这就是混入（mixin）的最简单的理解。

示例：

var myMixin = {
      data: function () {
        return {
          message: 'hello',
          foo: 'abc'
        }
      },
      created: function () {
        this.hello()
      },
      methods: {
        hello: function () {
          console.log('hello from mixin!')
        }
      },
      template: `<div><p>this is in Foo</p></div>`
    }

哈哈，你有没有发现，跟定义一个vue组件的代码是一样的。data,methods,template等等样样俱全。关键是在引入mixin对象时，才能看出来它是mixin。如何引入，在vue对象的构造函数里增加 mixins属性即可。

如：有个vue对象要引入以上的mixin对象时，如下代码

new Vue({
      mixins: [mixin],
      data: function () {
        return {
          message: 'goodbye',
          bar: 'def'
        }
      },
      created: function () {
        console.log(this.$data)
      }
    })

二、混入对象和vue组件在合并时有几条简单的规则

1、data有相同时，以组件优先，这叫就近原则。

2、钩子函数同名时，将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子**之前**调用。有点像原生中，一个事件绑定了多个事件处理函数一样（addEventListener一样）

3、`methods`、`components` 和 `directives等对象也会合并，但是对象里的键有冲突时，以组件优先，即`取组件对象的键值对。还是就近原则

三、混入的代码示例：

可以参考[官网的示例][Link 1]，我这个博客主要是方便大家理解（ps：官网的文档总是比较“官方，官腔……”）

[Link 1]: https://cn.vuejs.org/v2/guide/mixins.html