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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 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程序时遇到的三个问题
2012/01/17 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python工厂函数用法实例分析
2018/05/14 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python 对key为时间的dict排序方法
2018/10/17 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
简单了解django缓存方式及配置
2019/07/19 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Python通过len函数返回对象长度
2020/10/22 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
"火柴棍式"程序员面试题
2014/03/16 面试题
最新自我评价范文
2013/11/16 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年应急工作总结
2014/12/11 职场文书
成本会计岗位职责
2015/02/03 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python