vue的mixins属性详解
更新时间：2018年03月14日 10:20:04 作者：Marchanges
这篇文章主要介绍了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() 方法。
这样就可以减少一部分代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了使用vue-cli（vue脚手架）快速搭建项目的方法，vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了vue服务端渲染操作,结合简单实例形式分析了vue.js服务端渲染操作的原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
今天小编就为大家分享一篇vue 解决遍历对象显示的顺序不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了Vue.js框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了vue实现三级导航展示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文主要介绍了vue父组件调用子组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了vue将后台数据时间戳转换成日期格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue中watch监听器的触发时机(watch的坑及解决)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了vue中百度地图定位及附近搜索功能使用步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
最新评论