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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
js几个不错的函数 $$()
Oct 09 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
layui 表单标签的校验方法
Sep 04 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 解压rar文件及zip文件的方法
2014/05/05 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python模拟斗地主发牌
2020/04/22 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
三个儿子教学反思
2014/02/03 职场文书
实习介绍信模板
2015/01/30 职场文书
法人代表资格证明书
2015/06/18 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python