Vue中mixin混入用法

Vue.js混入对象(mixin)的使用与特性

最新推荐文章于 2025-06-03 09:55:32 发布

原创最新推荐文章于 2025-06-03 09:55:32 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端

文章介绍了在Vue.js中如何创建和使用混入对象(mixin)，包括数据、方法和生命周期钩子的处理。当组件引用混入对象时，数据和方法不会共享，而同名方法会合并，混入的方法优先执行。同时，展示了混入对象与组件自身定义的方法冲突时的处理规则。

在src目录下创建一个mixins文件夹，文件夹下新建自己要定义的混入对象js文件

// minix.js
// 定义一个混入对象
export const mixin = {
  data() {
    return {
      num: 1
    }
  },
  created() {
    this.fun1()
    this.fun2()
    console.log('created mixin')
  },
  methods: {
    fun1() {
      console.log('fun1 mixin')
    },
    fun2() {
      console.log('fun2 mixin')
    },
  }
}

在组件中使用

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin]
  }
</script>

特点

方法和参数在组件间不共享

例如：组件1和组件2中都引入了 minix.js

组件1 ：对 num + 1 操作 --> 输出 num 的值为 2
组件2：                    输出 num 的值为 1

函数：例如created() 、mounted() 等，会进行合并调用,且同名函数先执行mixin中的同名函数

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin],
    created() {
      console.log('created component')
    }
  }
</script>
...

控制台输出结果：
created mixin
created component

对象：例如 methods，选项会被合并，键发生冲突时，组件中的方法会覆盖mixin混入对象中的方法

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin],
    methods: {
      fun1() {
        console.log('fun1 component')
      },
      fun3() {
        console.log('fun3 component')
      },
    }
  }
</script>
...

控制台输出结果：
fun1 component
fun2 mixin
fun3 component