vue的mixins属性详解
时间:2019-04-13
本文章向大家介绍vue的mixins属性详解,主要包括vue的mixins属性详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先先给出官网 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() 方法。
这样就可以减少一部分代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 画廊视图Gallery
- WebForms使用System.Web.Routing
- 学Java到底好不好,已学未学将要学,大家都快看过来
- 理解SynchronizationContext
- WPF 的Main方法
- WiX制作安装包--系统必备
- 选项卡TabHost
- FPGA入门
- .NET 4 System.Threading.Barrier 类
- 终被捕!5名罗马尼亚黑客因入侵华盛顿政府摄像头被捕
- VUE 入门基础(9)
- 国家级人工智能产业基地落户松江,发布上海首款国产人工智能芯片
- C# 4.0 Optional Parameters 和Named Parameters
- 开源Web服务器GoAhead远程代码执行漏洞 影响数十万物联网设备
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- FastDFS基于Docker安装
- 用Python实现批量高效文件处理 解放你的双手
- Windows下使用VS2013编译使用SDL库
- C语言经典习题100例(一)1-5
- C语言经典习题100例(二)6-10
- Python 快速验证代理IP是否有效
- C语言入门系列之6.一维和二维数组
- C语言经典习题100例(五)21-25
- Python 列表 使用技巧
- 通过案例学Python之判断属相
- C语言经典习题100例(七)31-35
- C语言经典习题100例(八)36-40
- 学习笔记:一个MySQL实例有多个Activiti数据库问题
- C语言经典习题100例(九)41-45
- C语言入门系列之1.C语言概述和上机运行简单C程序