Mixin混入分发Vue组件可复用功能基础示例

更新时间：2023年06月06日 10:45:56 作者：菜园前端

这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Mixin 混入

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

怎么理解呢，就是每一个组件都会有一些选项 data、computed、methods ...对吧，假设我有 10 个组件，每一个组件内都有一个相同的 methods 方法，那我就将这个可复用的方法抽离到 mixin 文件中，然后在引入进来。这样我就不需要每个组件都编写重复的 methods 方法了，data、mounted 等等的选项也是如此。

基础案例

hello-world.vue

<template>
    <div class="home">
        {{ name }}
    </div>
</template>
<script>
import mixin from './mixin.js'
export default {
    mixins: [mixin],
    data() {
        return {}
    }
}
</script>

mixin.js

export default {
    data() {
        return {
            name: 'xiaoming'
        }
    }
}

预览效果

选项合并

因为混入会把它本身的选项和组件的选项一起合并，那么也就是说会发生一些冲突，例如混入中的文件含有 name 属性，而组件的选项 data 中也存在 name 属性，那页面渲染的时候会以哪个为准呢？接下来进行测试一下。

hello-world.vue

<template>
    <div class="home">
        {{ name }}
    </div>
</template>
<script>
import mixin from './mixin.js'
export default {
    mixins: [mixin],
    data() {
        return {
            name: 'libai'
        }
    }
}
</script>

mixin.js

export default {
    data() {
        return {
            name: 'xiaoming'
        }
    }
}

预览效果

可以看出来是以组件选项的为准，这里只举例了选项 data 的冲突，其他选项 methods、computed、mounted 也是如此，小伙伴们可以自行去测试一下。在开发的时候需要多留意一下冲突的情况。

您可能感兴趣的文章:

Vue实现tab切换的两种方法示例详解
这篇文章主要介绍了Vue实现tab切换的两种方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue组件如何被其他项目引用
这篇文章主要为大家详细介绍了vue组件如何被其他项目引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
Monorepo风格的组件工程搭建示例详解
这篇文章主要介绍了Monorepo风格的组件工程搭建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue中router-view无法显示的解决办法
这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下
2023-07-07
基于Vue和Firebase实现一个实时聊天应用
在本文中,我们将学习如何使用Vue.js和Firebase来构建一个实时聊天应用,Vue.js是一种流行的JavaScript前端框架,而Firebase是Google提供的实时数据库和后端服务,结合这两者,我们可以快速搭建一个功能强大的实时聊天应用,需要的朋友可以参考下
2023-08-08
vue3.x lodash在项目中管理封装指令的优雅使用
这篇文章主要为大家介绍了vue3.x lodash在项目中管理封装指令的优雅使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
Vue实现多点涂鸦效果的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现多点涂鸦效果，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
vue中动态组件使用及传值方式
这篇文章主要介绍了vue中动态组件使用及传值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
深入详解Vue中的路由懒加载
路由懒加载是一种优化技术，用于延迟加载应用程序中的路由组件，它可以提高初始加载速度并减少资源消耗，特别适用于大型单页应用，下面我们就来看看它的原理与使用吧
2023-08-08
vue动态子组件的两种实现方式
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09