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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php session_decode函数用法讲解
2019/05/26 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
jquery $.each()使用探讨
2013/09/23 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python中os包的用法
2020/06/01 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
社区健康教育实施方案
2014/03/18 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
车队安全员岗位职责
2015/02/15 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS