vue中的混入 mixin

最新推荐文章于 2024-06-27 22:30:00 发布

码代码的程序员

最新推荐文章于 2024-06-27 22:30:00 发布

阅读量278

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_41615439/article/details/109153263

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文深入解析Vue中的Mixins概念，介绍其作为组件间功能复用的灵活方式，并探讨了混入对象如何工作，包括局部与全局混入的区别及注意事项。

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

什么是mixins？

官方解释：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins可以理解成常见函数封装，想像一下封装JS方法。一个方法你想到处使用，是不是可以提个文件出来封装个函数。但也不一定只干这个事，也可以进行一些业务逻辑的拆分、组合。不过这个还是风险比较大(命名冲突的问题)的。

混入方式

组件按需混入、

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

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

全局混入

全局混入
import Router from 'vue-router' ；
Vue.use(Router)
谨慎使用，它会影响Vue 实例 (包括第三方组件)。

总结：

选项合并

1、混入的 data 中，键名相同，则读取组件中的键名；反之读取混入键名；

2、钩子：同名钩子函数将混合为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的混入：如methods,components等，选项会被合并，组件对象覆盖混入对象。