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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
jquery ui对话框实例代码
May 10 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JS实现520 表白简单代码
May 21 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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/05/08 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue项目关闭eslint校验
2018/03/21 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
详解python数据结构和算法
2019/04/18 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python datetime包函数简单介绍
2019/08/28 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
综合测评个人总结
2015/03/03 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书