vue2中的mixins混入

前端贾公子

已于 2023-11-09 10:10:58 修改

阅读量1.3k

点赞数 3

分类专栏：前端技能文章标签： flutter

于 2023-11-08 16:33:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_63358859/article/details/134292517

版权

引言：

在Vue.js开发中，我们经常会遇到一些场景，多个组件之间需要共享一些相似的逻辑或功能。如果每个组件都独立实现这些逻辑，会导致代码冗余和维护困难。为了解决这个问题，Vue.js提供了mixins混入功能，它允许我们将可复用的代码逻辑封装成一个混入对象，然后在多个组件中引入并使用。

一、什么是混入？

在Vue.js中，mixins混入是一种将可复用的代码逻辑封装成一个对象，然后通过混入机制将其注入到组件中的一种方式。混入对象可以包含组件选项、生命周期钩子、方法等，它们会被合并到组件中，从而实现代码的复用。、

mixins

类型：Array<Object>

详细：

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

基础

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

例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var comp