Vue复用之Mixins混入

最新推荐文章于 2025-04-23 17:43:43 发布

小菜101

最新推荐文章于 2025-04-23 17:43:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue mixins 混入 vue混入 vue重用

本文链接：https://blog.youkuaiyun.com/github_36091081/article/details/107183164

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Vue中的Mixins混入机制，用于复用组件代码。当组件与Mixins中存在相同的数据对象时，组件内的会覆盖Mixins；而对于钩子函数，会合并进数组并先后触发，首先执行Mixins中的函数。同时提到了全局混入的使用以及自定义合并策略的可能性，提醒开发者需谨慎使用全局混入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.1 Mixins 混入

1. 什么是Mixins

当多个组件内部都写了同样的方法，如何将该方法提取出来，减少代码量呢？
Vue实现方式如下：

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2. mixins里定义的和组件内部定义的重复冲突了怎么办

2.1 数据对象是采取合并策略，

组件内部的覆盖mixins里定义的，如下：

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

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

2.2 钩子函数采取的是将他们merge进数组

都触发，先触发mixins中的函数，如下

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"