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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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多例模式介绍
2013/06/24 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
Python生成pdf文件的方法
2014/08/04 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python实现转圈打印矩阵
2019/03/02 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
ktv好的活动方案
2014/08/17 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Elasticsearch 批量操作
2022/04/19 Python