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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue+iview实现手机号分段输入框
Mar 25 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小程序自动提交到自助友情连接
2009/11/24 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
对python 命令的-u参数详解
2018/12/03 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python实现倒计时小工具
2019/07/29 Python
Python学习之os模块及用法
2020/06/03 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
教育课题研究自我鉴定范文
2013/12/28 职场文书
《老山界》教学反思
2014/04/08 职场文书
异地年检委托书范本
2014/09/24 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
教师党员个人总结
2015/02/10 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
PHP RabbitMQ消息列队
2022/05/11 PHP