脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue Mixin混入

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.js做select下拉列表的实例(ul-li标签仿select标签)

    Vue.js做select下拉列表的实例(ul-li标签仿select标签)

    下面小编就为大家分享一篇Vue.js做select下拉列表的实例(ul-li标签仿select标签)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    这篇文章主要介绍了Vue中如何使用mock模拟数据，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue的axios和mock.js你了解吗

    vue的axios和mock.js你了解吗

    这篇文章主要为大家详细介绍了vue的axios和mock.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • 基于vue+h5实现车牌号输入框功能(demo)

    基于vue+h5实现车牌号输入框功能(demo)

    最近开发项目是学校校内车辆超速方面的统计检测方面的系统,在开发过程中发现有个小功能,就是用户移动端添加车牌号,刚开始想着输入框,提交时正则效验一下格式,最后感觉不方便,所以就简单自己手写了一个H5车牌号软键盘,对vue车牌号输入框实现代码感兴趣的朋友一起看看吧
    2025-03-03
  • vue之el-upload使用FormData多文件同时上传问题

    vue之el-upload使用FormData多文件同时上传问题

    这篇文章主要介绍了vue之el-upload使用FormData多文件同时上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue使用element-resize-detector监听元素宽度变化方式

    vue使用element-resize-detector监听元素宽度变化方式

    这篇文章主要介绍了vue使用element-resize-detector监听元素宽度变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue 弹出框 引入另一个vue页面的示例代码

    vue 弹出框 引入另一个vue页面的示例代码

    这篇文章主要介绍了vue 弹出框引入另一个vue页面,这种方式适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue实现原理this.$message实例详解

    vue实现原理this.$message实例详解

    这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue3自定义指令语法图文详解

    Vue3自定义指令语法图文详解

    这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • 使用Vue实现调用接口加载页面初始数据

    使用Vue实现调用接口加载页面初始数据

    今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论