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 相关文章推荐
js 编写规范
Mar 03 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
Javascript实现单选框效果
Dec 09 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python类定义的讲解
2013/11/01 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
三个python爬虫项目实例代码
2019/12/28 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python中for in的用法详解
2020/04/17 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
使用索引有什么好处
2016/07/27 面试题
态度决定一切演讲稿
2014/05/20 职场文书
重点工程汇报材料
2014/08/27 职场文书
小学班级特色活动方案
2014/08/31 职场文书
护士个人年终总结
2015/02/13 职场文书
跳高加油稿
2015/07/21 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript