脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 也是如此，小伙伴们可以自行去测试一下。在开发的时候需要多留意一下冲突的情况。

您可能感兴趣的文章:

相关文章

  • vue3中配置文件vue.config.js不生效的解决办法

    vue3中配置文件vue.config.js不生效的解决办法

    这篇文章主要介绍了vue3中配置文件vue.config.js不生效的解决办法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下
    2024-05-05
  • Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题

    这篇文章主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue解决跨域问题(推荐)

    vue解决跨域问题(推荐)

    这篇文章主要介绍了vue解决跨域问题，本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • 10分钟上手vue-cli 3.0 入门介绍

    10分钟上手vue-cli 3.0 入门介绍

    这篇文章主要介绍了10分钟上手vue-cli 3.0 入门介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue2.0实战之使用vue-cli搭建项目（2）

    vue2.0实战之使用vue-cli搭建项目（2）

    这篇文章主要为大家详细介绍了vue2.0实战第二篇使用vue-cli搭建项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 关于antd中select搜索框改变搜索值的问题

    关于antd中select搜索框改变搜索值的问题

    这篇文章主要介绍了关于antd中select搜索框改变搜索值的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue+element 解决浏览器自动填充记住的账号密码问题

    Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中，如何实现此功能呢，下面小编给大家介绍下，感兴趣的朋友一起看看吧
    2019-06-06
  • 父子组件生命周期及子组件获取数据传值问题剖析

    父子组件生命周期及子组件获取数据传值问题剖析

    这篇文章主要介绍了父子组件生命周期及子组件获取数据问题剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-10-10
  • Vue如何实现自动触发功能

    Vue如何实现自动触发功能

    这篇文章主要介绍了Vue如何实现自动触发功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • vue.js中修饰符.stop的用法解析

    vue.js中修饰符.stop的用法解析

    这篇文章主要介绍了vue.js中修饰符.stop的用法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03

最新评论