vue的mixins属性详解


Posted in Javascript onMarch 14, 2018

首先先给出官网 https://vuejs.org/v2/guide/mixins.html

今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性。

下面是我的-mixin.js 文件

import {mapGetters, mapMutations, mapActions} from 'vuex'  
export const playlistMixin = { 
 computed: { 
  ...mapGetters([ 
   'playList' 
  ]) 
 }, 
 mounted() { 
  this.handlePlaylist(this.playList) 
 }, 
 activated() { 
  this.handlePlaylist(this.playList) 
 }, 
 watch: { 
  playList(newVal) { 
   this.handlePlaylist(newVal) 
  } 
 }, 
 methods: { 
  handlePlaylist() { 
   throw new Error('component must implement handlePlaylist method') 
  } 
 }  
}

这个文件就暴露出一个对象,不过这个对象和组件很类似,也就是组件的js代码部分类似。

这个.js文件要做的事情就是,在生命周期中和playList 变量改变的时候触发handlePlaylist 函数,但是这个函数的逻辑是在各自要改变的组件当中去实现。下面看看怎么用Mixin。

import {playlistMixin} from 'common/js/mixin' //引入Mixin 
 export default { 
  mixins: [playlistMixin], 
  methods: { 
    handlePlaylist (playlist) { 
    let bottom = playlist.length > 0 ? '60px' : '' 
    this.$refs.recommend.style.bottom = bottom 
    this.$refs.scroll.refresh() 
   }, 
  } 
 }

在使用的组件中这样调用。

mixins: 这个属性是个数组,也就是说可以加载多个 minxin 文件。

handlePlaylist 方法是完成业务逻辑。所以在组件的生命周期中都会添加 this.handlePlaylist() 方法。

这样就可以减少一部分代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 #Javascript
react以create-react-app为基础创建项目
Mar 14 #Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 #Javascript
You might like
php数组合并与拆分实例分析
2015/06/12 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JS 继承实例分析
2008/11/04 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
Javascript的this用法
2017/01/16 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
pandas.cut具体使用总结
2019/06/24 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
项目投资意向书
2014/04/01 职场文书
婚前协议书标准版
2014/10/19 职场文书
生日赠语
2015/06/23 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
MySQL 数据 data 基本操作
2022/05/04 MySQL