首先是官网定义：混入 (mixin) 提供了一种非常灵活的形式，来散发 Vue 组件中的可复用性能。一个混入对象能够蕴含任意组件选项。当组件应用混入对象时，所有混入对象的选项将被“混合”进入该组件自身的选项。

艰深来讲，就是 mixin 中的属性，比方 data、methods 或者自定义属性，将被混入到全副或者指定的组件中，让这些组件能够调用 mixin 中所定义的属性或者事件

全局 mixin

首先，咱们间接定义全局的 mixin

// 定义全局 mixinapp.mixin({  message: 'mixin',  data() {    return {      count: 100,    };  },});

混入 data

全局mixin默认会混入所有组件中，接下来，咱们再定义一个组件，模板中插入 message 字段，如下所示：

const app = Vue.createApp({  template: `    <div>{{message}}</div>  `,});

此时mixin中的data属性将会混入到组件中，尽管组件的 data 中并没有蕴含 message 字段，然而在运行的页面中仍然显示出 message 的值 mixin message。当初，咱们在组件外部的 data 中也增加 message 字段。

const app = Vue.createApp({  data() {    return {      message:'app message'    }  }  ...});

这时候，运行页面，模板中的内容将显示组件中 data 里的值 app message，这阐明，组件外部 data 的优先级是高于 mixin 外部 data 的优先级的。

混入事件（methods）

同样的，咱们也能够一下测试事件的优先级

const app = Vue.createApp({  ...  methods: {    handleClick() {      console.log('app click');    }  },  // 这里点击元素，会打印出 "app click"  template: "<div @click="handleClick">{{message}}</div>"}); // 定义全局 mixinapp.mixin({  ...  methods: {    handleClick() {      console.log('mixin click');    }  }});

点击div，将会打印出 app click ，这阐明当 mixin 中和组件中都存在 handleClick 事件时，组件中同名事件优先级会比拟高。

混入生命周期函数（created、mounted 等）

上面，咱们同时在 mixin 和 app 中定义 created 函数

const app = Vue.createApp({  ...  created() {    console.log("app created");  }}); // 定义全局 mixinapp.mixin({  created() {  ...    console.log("mixin created");  }});

运行此页面，打印台会输入

mixin createdapp created

也就是说，mixin中的生命周期钩子函数与 app 组件中的钩子函数都会运行，mixin 优先执行

混入自定义属性

咱们还能够间接在 mixin 和 app 组件中自定义属性。自定义属性在模板中须要用 $options[prop] 的形式调用

const app = Vue.createApp({  message: "app message",  template: "<div @click="handleClick">{{$options.message}}</div>"}); // 定义全局 mixinapp.mixin({  message: "mixin message"});

运行页面，模板将会展现 app 组件中 message 中的值 app message ，可见，自定义属性也是组件比 mixin 优先级高。

批改自定义属性合并策略

如果咱们想让 mixin 的优先级高于组件的优先级，咱们能够通过以下代码进行批改

app.config.optionMergeStrategies.message = (mixinVal, appVal) => {  return mixinVal || appVal;};

合并策略办法中承受两个参数，第一个参数为 mixin 自定义属性值，第二个参数为 app 组件自定义属性值，用户能够通过办法判断来返回哪个值，来定义自定义属性的优先级。

下面代码定义了如果 mixinVal 有值则返回 mixinValue，否则返回 appVal，所以模板中显示的应该的是 mixin message。

部分组件

部分组件的定义，须要显式申明进组件内。

// 1. 申明部分组件变量const MyMixin = {  data() {    return {    };  },  created() {    console.log('mixin created');  },  methods: {    handleClick() {    },  },};// 2. 通过mixins属性注入到要被混合组件中const app = Vue.createApp({  mixins: [myMixin]})

除了须要通过 mixins 属性注入，其余与全局组件无差别，所以不在独自论述。

缺点

mixin能够将局部组件抽成可重用块，然而他也有不可避免的问题。

  1. mixin很容易发生冲突，你会不清晰某个值到底是从 mixin 还是 app 来的。
  2. 可重用性无限，不能通过传递参数批改 mixin 的逻辑，升高了形象逻辑的灵活性。

总结

这篇文章，咱们讲了如下几点：

  1. mixin的概念及定义
  2. 混入 data、methods、生命周期函数
  3. 混入自定义属性，批改自定义属性的混合策略
  4. 全局 mixin 及 部分 mixin 定义形式
  5. mixin 的缺点