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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue中activated的用法
Jan 03 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
解读Vue组件注册方式
May 15 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 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下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
js 处理URL实用技巧
2010/11/23 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
中国好声音广告词
2014/03/18 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android