携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 14 天，点击查看活动详情

Vue2 中的 mixins

今天学什么？
今天学习 Vue2 中的 mixins。

官方文档

文档地址

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

个人理解

mixins

中文释义：混入。（单词为了方便记忆。迷信？）

1.基础使用

demo.mixin.js

const DemoMixin = {
  data() {
    return {
      name: '1',
    }
  },
  created() {
    console.log('mixins-中的created')
  },
}

export default DemoMixin

组件

<script>
import DemoMixin from '@/mixin/demo.mixin'
export default {
  mixins: [DemoMixin],
  created() {
    console.log('组件hellloWorld中created执行了')
  },
}
</script>

输出

mixins-中的created
组件hellloWorld中created执行了

2.多个组件使用同一个 mixin 文件，组件中的 mixin 数据独立。

比如说：a 组件引用了demo.mixin.js；b 组件引用了demo.mixin.js；a 组件修改了 mixin 中 name 属性，b 组价中的 name 属性不收影响。

3.重名配置如何处理

如果是类似对象类型的配置，例如 data,methods,components,如果配置重名，组件的内容会覆盖 mixin 中的文件；
如果是函数类型的配置，例如 created,mounted,mixin 中的代码会先执行，再执行组件的代码；
引入多个 mixin 文件，按引入顺序mixins: [a,b]，如果 mixin 中的配置重名，按照引进的顺序，后者覆盖前者。

4. mixin 和组件的区别

组件是：在引用的页面划分一个区域给子组件，然后通过 props 和$emit 相互通信,两者相互之间较独立。

mixin: 类似于对多个页面的公共方法或属性进行抽离。相当于拓展引用的页面。

5. mixin 的使用场景？

例如：我有好几个组件，组件中都有 label，value 等属性，以及 get set 等方法，这个时候就可以使用 mixin 将这些属性方法单独抽离出来，统一使用 mixin 来扩展。

end

mixin 还是蛮好用的。默认给组件初始化一些属性和方法，同时可以在组件中覆盖 mixin 中的方法，达到代码精简的目的。

学习一下 Vue2 中的 mixins