Vue用mixin合并重复代码的实现


Posted in Vue.js onNovember 27, 2020

       在我们做项目的时候,往往有很多代码逻辑是通用的,比如说,业务逻辑类型的判断,时间戳的转换,url中字符串的截取等等,这些函数如果在每个需要的页面中都加入的话,不仅加重了当前页面的逻辑复杂程度,还会占用大量原本可以省略的内存。因此,将这些代码整理出来统一管理是很有必要的,在vue项目中,我们都知道模块化和组件化,但vue的框架中还有一个很好用的知识点,就是mixin

      mixin不仅可以存放data、watch、methods、computed等,还可以存放Vue的生命周期,是不是很神奇呢?

     通过点击按钮“点击我”,实现“难受”和“极好的”相互切换,首先上效果图:

     初始页面:

Vue用mixin合并重复代码的实现

       子组件1和子组件2都可以通过“点击我”,实现状态改变,通过触发子组件1的按钮1,触发子组件2的按钮2次,效果如下:

Vue用mixin合并重复代码的实现

      项目的核心结构如下:

Vue用mixin合并重复代码的实现

       其中,新增了mixin文件夹,新增了Child1.vue和Child2.vue,更改HelloWorld.vue为Father.vue,因为本人有代码洁癖,觉得vueRouter默认的hash模式,会使得前端路由有些难看,所以改成了history模式,项目更改的文件代码如下

Child1.vue

<template>
  <div class="Child1">
    <h1>我是子组件1</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitChange">点击我</button>
  </div>
</template>
 
<script>
import { Happy } from '../mixin/showHappy'
export default {
  name: "Child1",
  mixins: [Happy]
}
</script>

Child2.vue 

<template>
  <div class="Child2">
    <h1>我是子组件2</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitChange">点击我</button>
  </div>
</template>
 
<script>
import { Happy } from '../mixin/showHappy'
export default {
  name: "Child2",
  mixins: [Happy]
}
</script>

Father.vue

<template>
 <div class="Father">
  <h1>我是父组件</h1>
  <child1-component />
  <child2-component />
 </div>
</template>
 
<script>
import Child1Component from './Child1'
import Child2Component from './Child2'
export default {
 name: 'Father',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 components:{
  Child1Component,
  Child2Component
 }
}
</script>

mixin/showHappy.js

/*这里是专门用来进行mixin测试的(通过点击按钮会相应的改变对应状态)*/
export const Happy = {
  data(){
    return{
      isRealHappy:true,
      status: '',
      sad: '难受',
      comfort: '舒服'
    }
  },
  methods:{
    submitChange(){
      if(this.isRealHappy){
        this.isRealHappy = !this.isRealHappy
        this.status = this.comfort
      }else{
        this.isRealHappy = !this.isRealHappy
        this.status = this.sad
      }
    }
  }
}

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Father from '@/components/Father'
 
Vue.use(Router)
 
const routes = [
 {
  path: '/',
  name: 'Father',
  component: Father
 }
]
const routers = new Router({
 mode: 'history',
 routes
})
export default routers

那么,代码贴了这么多,mixin究竟有啥用呢?那就是代码复用

Vue用mixin合并重复代码的实现

如果我们不用mixin这种方式,直接把这段代码贴到Child1.vue和Child2.vue中,也是可以实现与页面展示一样的效果:

Vue用mixin合并重复代码的实现

Vue用mixin合并重复代码的实现

         很显然,mixin的书写方式更优雅,虽然项目中没有这么简单的代码,但这是一种思想! 让我们更精致一些,让项目让代码尽可能高类聚低耦合,如此一来,我们必然会成为更优秀的程序员!         

顺便提及一下使用小细节,如果在组件中出现了与mixin中相同的属性或方法,会优先展示组件中的属性和方法哦!各位小伙伴,一起加油吧!

到此这篇关于Vue用mixin合并重复代码的实现的文章就介绍到这了,更多相关Vue mixin合并重复代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
扩展String功能方法
2006/09/22 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python实现雨滴下落到地面效果
2018/06/21 Python
python实现图片批量压缩程序
2018/07/23 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
中英双版中文教师求职信
2013/10/27 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
销售提升方案
2014/06/07 职场文书
一份文言文检讨书
2014/09/13 职场文书
转让协议书
2015/01/27 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
煤矿施工安全协议书
2016/03/22 职场文书