vue混入mixin流程与优缺点详解

 更新时间:2022年09月20日 16:59:01   作者:正在学习前端的渣渣-小方同学  
混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

1、什么是mixin

这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin。

官方解释:

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

自己的理解:

将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余度,也可以让后期维护起来更加容易。

2、mixin与Vuex的区别

vuex: 公共状态管理,如果在一个组件中更改Vuex中的某个数据,name其他所有引入了Vuex中该数据的组件也会跟着变化;

Mixin: 中的数据和方法都是独立的,组件之间使用后是相互不影响的。

3、mixin的使用

可以理解为一个对象。只不过这个对象里面可以包含Vue组件中的一些常见配置。如data,methods,created。

3.1、局部混入

<script>
//1、引入
import MyMixin from "../../mixin/index"
export default {
  //使用
  mixins: [MyMixin],
}
</script>

3.2、全局混入

在main.js中配置全局混入,请谨慎使用全局混入,因为它会影响每个单独创建的Vue实例。推荐将其作为插件发布,以避免重复应用混入。

import Mixin from "./mixin";
Vue.mixin(Mixin)

4、mixin选项合并

mixin中定义的属性或方法名称与组件中定义的名称冲突了,该怎么办?

当发生了冲突,默认使用或执行组件内部的数据或方法。

4.1、生命周期函数

确切来说不算冲突,因为生命周期函数的名称都是固定的。默认的合并策略如下:

先执行mixin中生命周期函数中的代码,然后执行组件内部的代码。

4.2、data中的数据冲突

当mixin中的data数据和组件中的data的数据冲突时,组件中的data数据会覆盖mixin中数据。

4.3、方法冲突

命名方法的名字一样就会冲突。

可以自定义合并规则解决冲突,但是感觉没必要,这使项目更加复杂了

5、优缺点

5.1、优点

  • 提高代码复用性
  • 无需传递状态
  • 维护方便,只需要修改一个地方

5.2、缺点

  • 命名冲突
  • 滥用的话后期很难维护
  • 不好追溯源,排查问题稍显麻烦
  • 不能轻易的重复代码

6、利用mixin开发一个UI库

简单案例

创建Button.vue组件

<template>
  <div class="Button">
    <button :class="['my-btn', btnStyle]">
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    btnStyle: {
      type: String,
      default: 'btn-primary'
    },
  },
}
</script>
<style scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  border: none;
  background-color: #874b4b;
  color: #fff;
}
.my-btn.btn-primary {
  background-color: blue;
  /*color: #fff;*/
}
.my-btn.btn-danger {
  background-color: red;
  /*color: #fff;*/
}
</style>

在index.js中引入并暴露:

import MyBtn from "./MyUI/Button";
export default {
    components:{
        MyBtn
    }
}

在组件内混入使用的方法

<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
import MyMixin from "../../mixin/index"
export default {
  name: "MixinStudy",
  mixins: [MyMixin],
}
</script>

全局混入的使用方法

main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Mixin from "./mixin";
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;
Vue.mixin(Mixin)
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
//组件中
<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
export default {
  name: "MixinStudy",
}
</script>

到此这篇关于vue混入mixin流程与优缺点详解的文章就介绍到这了,更多相关vue混入mixin内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 基于Vant UI框架实现时间段选择器

    基于Vant UI框架实现时间段选择器

    这篇文章主要为大家详细介绍了基于Vant UI框架实现时间段选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue中使用element日历组件的示例代码

    vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    这篇文章主要介绍了vue利用全局导航守卫作登录后跳转到未登录前指定页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab,觉的非常实用,大家可能在做项目时会用到,感兴趣的朋友跟随程序员之家小编一起学习吧
    2018-03-03
  • vue项目实现webpack配置代理,解决跨域问题

    vue项目实现webpack配置代理,解决跨域问题

    这篇文章主要介绍了vue项目实现webpack配置代理,解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue简易记事本开发详解

    vue简易记事本开发详解

    这篇文章主要为大家详细介绍了vue简易记事本的开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue.js实现带日期星期的数字时钟功能示例

    vue.js实现带日期星期的数字时钟功能示例

    这篇文章主要介绍了vue.js实现带日期星期的数字时钟功能,涉及vue.js基于定时器的日期时间运算与数值操作相关使用技巧,需要的朋友可以参考下
    2018-08-08
  • Vue实现点击后文字变色切换方法

    Vue实现点击后文字变色切换方法

    下面小编就为大家分享一篇Vue实现点击后文字变色切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue中get和post请求的区别点总结

    vue中get和post请求的区别点总结

    在本篇文章里小编给大家分享的是一篇关于vue中get和post请求的区别点总结内容,对此有兴趣的朋友们可以跟着学习下。
    2021-12-12
  • vue3 自定义指令详情

    vue3 自定义指令详情

    这篇文章主要介绍了 vue3 自定义指令详情,自定义指令分为全局和局部两种类型,大家并不陌生。今天我们就讲讲在 vue3 中,自定义指令定义、使用以及钩子函数都有哪些变化?,需要的朋友可以参考一下
    2021-11-11

最新评论


http://www.vxiaotou.com